1. 首页
  2. 问答
  3. HTML CSS外层div文本居中对齐，DIV文本对齐左内

HTML CSS外层div文本居中对齐，DIV文本对齐左内

2017-04-13 86 views
0

存在与文本的框，在该框的右侧有一个图像HTML CSS外层div文本居中对齐，DIV文本对齐左内

文本的框是具有比图像更高的z折射率，所以文本框看起来就像图像

我使用文本对齐中心，中心内部的div的所有组件的前面，这是必须的

现在我唯一想要的文字，只有在文本框中的文本左对齐

我该如何做到这一点？

.button-yellow, .button-red { 
 
    font: 16px AdobeCaslonPro; 
 
    text-decoration: none; 
 
    padding: 6px 12px 6px 12px; 
 
    border-right: 1px solid #333333; 
 
    border-bottom: 1px solid #333333; 
 
    border-radius: 4px; 
 
    moz-border-radius: 4px; 
 
    webkit-border-radius: 4px; 
 
    font-style: italic; 
 
} 
 

 
.button-yellow { 
 
    background-color: #ccb96b; 
 
    color: #430615; 
 
} 
 

 
.button-red { 
 
    background-color: #430615; 
 
    color: #ccb96b; 
 
    margin-top: -20px; 
 
} 
 

 
#section-welcome-content { 
 
    text-align: center; 
 
} 
 

 
#welcome-content{ 
 
    width: 45%; 
 
    margin: 0 0 0 0 ; 
 
} 
 

 
#welcome-content-inner { 
 
    background-color: #ccb96b; 
 
    color: #430615; 
 
    padding: 50px; 
 
    z-index: 10; 
 
    position: relative; 
 
} 
 

 
#welcome-content p{ 
 
    
 
} 
 

 
#crop { 
 
    width: 600px; 
 
    height: 500px; 
 
    overflow: hidden; 
 
    margin: 0 0 0 -50px ; 
 
    
 
} 
 

 
#crop img { 
 
    width: 800px; 
 
    height: 600px; 
 
    margin: -75px 0 0 -100px; 
 
    z-index: 1; 
 
    
 
}
<section id="section-welcome-content" class="pad"> 
 
<div id="welcome-content" style=" display: inline-block; " > 
 
    <div id="welcome-content-inner" > 
 
    <p> 
 
    <h3 style="font-size: 1.5em; text-transform: uppercase;"> <i>Lorem ipsum</i> </h3> 
 

 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris arcu sapien, dignissim id laoreet quis, sollicitudin sed dui. Mauris mauris ligula, hendrerit sed ligula vitae, viverra auctor eros. Duis rutrum dolor a felis elementum, eu facilisis justo sollicitudin. 
 
    <br><br> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris arcu sapien, dignissim id laoreet quis, sollicitudin sed dui. Mauris mauris ligula, hendrerit sed ligula vitae, viverra auctor eros. Duis rutrum dolor a felis elementum, eu facilisis justo sollicitudin. 
 
      <br><br><br> 
 
    <a href="<?php echo base_url().$this->lang->lang(); ?>/aboutus" class="button-red" style="float: right;"> Read more</a> 
 
    </p> 
 
    </div> 
 
    <div> 
 
      &nbsp; 
 
    </div> 
 
    <div> 
 
    &nbsp; 
 
    </div>   
 
    </div> 
 
     <div id="crop" style=" display: inline-block; "> 
 
     <img src="http://media.caranddriver.com/images/media/51/2017-10best-lead-photo-672628-s-original.jpg" alt="" style=" "/> 
 
    </div> 
 
    </section>

任何帮助表示赞赏

来源

2017-04-13 keronconk

+0

哥们不介意，但你的问题是，像克里斯托弗·诺兰的电影给我。为了简单起见，您可以上传显示您想要的输出的图像吗？这会让它很快理解。 –

回答

3

我的答案包含2个场景，所以它可以帮助你以你想要的方式。所以你可以选择你想要的最好的方式。我还包括现场示例，以便您可以轻松检查它。

1.对于左侧的所有文本，其中包括标题和文本。加入这个CSS

/* For All Left */ 

#welcome-content-inner { 
    text-align: left; 
} 


.button-yellow, 
 
.button-red { 
 
    font: 16px AdobeCaslonPro; 
 
    text-decoration: none; 
 
    padding: 6px 12px 6px 12px; 
 
    border-right: 1px solid #333333; 
 
    border-bottom: 1px solid #333333; 
 
    border-radius: 4px; 
 
    moz-border-radius: 4px; 
 
    webkit-border-radius: 4px; 
 
    font-style: italic; 
 
} 
 

 
.button-yellow { 
 
    background-color: #ccb96b; 
 
    color: #430615; 
 
} 
 

 
.button-red { 
 
    background-color: #430615; 
 
    color: #ccb96b; 
 
    margin-top: -20px; 
 
} 
 

 
#section-welcome-content { 
 
    text-align: center; 
 
} 
 

 
#welcome-content { 
 
    width: 45%; 
 
    margin: 0 0 0 0; 
 
} 
 

 
#welcome-content-inner { 
 
    background-color: #ccb96b; 
 
    color: #430615; 
 
    padding: 50px; 
 
    z-index: 10; 
 
    position: relative; 
 
} 
 

 
#welcome-content p {} 
 

 
#crop { 
 
    width: 600px; 
 
    height: 500px; 
 
    overflow: hidden; 
 
    margin: 0 0 0 -50px; 
 
} 
 

 
#crop img { 
 
    width: 800px; 
 
    height: 600px; 
 
    margin: -75px 0 0 -100px; 
 
    z-index: 1; 
 
} 
 

 

 
/* For All Left */ 
 

 
#welcome-content-inner { 
 
    text-align: left; 
 
}
<section id="section-welcome-content" class="pad"> 
 
    <div id="welcome-content" style=" display: inline-block; "> 
 
    <div id="welcome-content-inner"> 
 
     <p> 
 
     <h3 style="font-size: 1.5em; text-transform: uppercase;"> <i>Lorem ipsum</i> </h3> 
 

 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris arcu sapien, dignissim id laoreet quis, sollicitudin sed dui. Mauris mauris ligula, hendrerit sed ligula vitae, viverra auctor eros. Duis rutrum dolor a felis elementum, eu facilisis justo 
 
     sollicitudin. 
 
     <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris arcu sapien, dignissim id laoreet quis, sollicitudin sed dui. Mauris mauris ligula, hendrerit sed ligula vitae, viverra auctor eros. Duis rutrum dolor a felis elementum, 
 
     eu facilisis justo sollicitudin. 
 
     <br><br><br> 
 
     <a href="<?php echo base_url().$this->lang->lang(); ?>/aboutus" class="button-red" style="float: right;"> Read more</a> 
 
     </p> 
 
    </div> 
 
    <div> 
 
     &nbsp; 
 
    </div> 
 
    <div> 
 
     &nbsp; 
 
    </div> 
 
    </div> 
 
    <div id="crop" style=" display: inline-block; "> 
 
    <img src="http://media.caranddriver.com/images/media/51/2017-10best-lead-photo-672628-s-original.jpg" alt="" style=" " /> 
 
    </div> 
 
</section>

2.对于纯文本是左和中心方向。添加这个CSS。

/* For only text Left and heading center */ 

#welcome-content-inner { 
    text-align: left; 
} 

#welcome-content-inner h3 { 
    text-align: center; 
} 


.button-yellow, 
 
.button-red { 
 
    font: 16px AdobeCaslonPro; 
 
    text-decoration: none; 
 
    padding: 6px 12px 6px 12px; 
 
    border-right: 1px solid #333333; 
 
    border-bottom: 1px solid #333333; 
 
    border-radius: 4px; 
 
    moz-border-radius: 4px; 
 
    webkit-border-radius: 4px; 
 
    font-style: italic; 
 
} 
 

 
.button-yellow { 
 
    background-color: #ccb96b; 
 
    color: #430615; 
 
} 
 

 
.button-red { 
 
    background-color: #430615; 
 
    color: #ccb96b; 
 
    margin-top: -20px; 
 
} 
 

 
#section-welcome-content { 
 
    text-align: center; 
 
} 
 

 
#welcome-content { 
 
    width: 45%; 
 
    margin: 0 0 0 0; 
 
} 
 

 
#welcome-content-inner { 
 
    background-color: #ccb96b; 
 
    color: #430615; 
 
    padding: 50px; 
 
    z-index: 10; 
 
    position: relative; 
 
} 
 

 
#welcome-content p {} 
 

 
#crop { 
 
    width: 600px; 
 
    height: 500px; 
 
    overflow: hidden; 
 
    margin: 0 0 0 -50px; 
 
} 
 

 
#crop img { 
 
    width: 800px; 
 
    height: 600px; 
 
    margin: -75px 0 0 -100px; 
 
    z-index: 1; 
 
} 
 

 

 
/* For only text Left and heading center */ 
 

 
#welcome-content-inner { 
 
    text-align: left; 
 
} 
 

 
#welcome-content-inner h3 { 
 
    text-align: center; 
 
}
<section id="section-welcome-content" class="pad"> 
 
    <div id="welcome-content" style=" display: inline-block; "> 
 
    <div id="welcome-content-inner"> 
 
     <p> 
 
     <h3 style="font-size: 1.5em; text-transform: uppercase;"> <i>Lorem ipsum</i> </h3> 
 

 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris arcu sapien, dignissim id laoreet quis, sollicitudin sed dui. Mauris mauris ligula, hendrerit sed ligula vitae, viverra auctor eros. Duis rutrum dolor a felis elementum, eu facilisis justo 
 
     sollicitudin. 
 
     <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris arcu sapien, dignissim id laoreet quis, sollicitudin sed dui. Mauris mauris ligula, hendrerit sed ligula vitae, viverra auctor eros. Duis rutrum dolor a felis elementum, 
 
     eu facilisis justo sollicitudin. 
 
     <br><br><br> 
 
     <a href="<?php echo base_url().$this->lang->lang(); ?>/aboutus" class="button-red" style="float: right;"> Read more</a> 
 
     </p> 
 
    </div> 
 
    <div> 
 
     &nbsp; 
 
    </div> 
 
    <div> 
 
     &nbsp; 
 
    </div> 
 
    </div> 
 
    <div id="crop" style=" display: inline-block; "> 
 
    <img src="http://media.caranddriver.com/images/media/51/2017-10best-lead-photo-672628-s-original.jpg" alt="" style=" " /> 
 
    </div> 
 
</section>

来源

2017-04-13 05:16:56

1

你只需要在你的welcome-content-innerDIV添加text-align:left;你的存在。

.button-yellow, .button-red { 
 
    font: 16px AdobeCaslonPro; 
 
    text-decoration: none; 
 
    padding: 6px 12px 6px 12px; 
 
    border-right: 1px solid #333333; 
 
    border-bottom: 1px solid #333333; 
 
    border-radius: 4px; 
 
    moz-border-radius: 4px; 
 
    webkit-border-radius: 4px; 
 
    font-style: italic; 
 
} 
 

 
.button-yellow { 
 
    background-color: #ccb96b; 
 
    color: #430615; 
 
} 
 

 
.button-red { 
 
    background-color: #430615; 
 
    color: #ccb96b; 
 
    margin-top: -20px; 
 
} 
 

 
#section-welcome-content { 
 
    text-align: center; 
 
} 
 

 
#welcome-content{ 
 
    width: 45%; 
 
    margin: 0 0 0 0 ; 
 
} 
 

 
#welcome-content-inner { 
 
    background-color: #ccb96b; 
 
    color: #430615; 
 
    padding: 50px; 
 
    z-index: 10; 
 
    position: relative; 
 
    text-align: left; 
 
} 
 

 
#welcome-content p{ 
 
    
 
} 
 

 
#crop { 
 
    width: 600px; 
 
    height: 500px; 
 
    overflow: hidden; 
 
    margin: 0 0 0 -50px ; 
 
    
 
} 
 

 
#crop img { 
 
    width: 800px; 
 
    height: 600px; 
 
    margin: -75px 0 0 -100px; 
 
    z-index: 1; 
 
    
 
}
\t \t <section id="section-welcome-content" class="pad"> 
 
     <div id="welcome-content" style=" display: inline-block; " > 
 
     <div id="welcome-content-inner" > 
 
      <p> 
 
      <h3 style="font-size: 1.5em; text-transform: uppercase;"> <i>Lorem ipsum</i> </h3> 
 

 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris arcu sapien, dignissim id laoreet quis, sollicitudin sed dui. Mauris mauris ligula, hendrerit sed ligula vitae, viverra auctor eros. Duis rutrum dolor a felis elementum, eu facilisis justo sollicitudin. 
 
      <br><br> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris arcu sapien, dignissim id laoreet quis, sollicitudin sed dui. Mauris mauris ligula, hendrerit sed ligula vitae, viverra auctor eros. Duis rutrum dolor a felis elementum, eu facilisis justo sollicitudin. 
 
      <br><br><br> 
 
      <a href="<?php echo base_url().$this->lang->lang(); ?>/aboutus" class="button-red" style="float: right;"> Read more</a> 
 
      </p> 
 
     </div> 
 
     <div> 
 
      &nbsp; 
 
     </div> 
 
     <div> 
 
      &nbsp; 
 
     </div>   
 
     </div> 
 
     <div id="crop" style=" display: inline-block; "> 
 
     <img src="http://media.caranddriver.com/images/media/51/2017-10best-lead-photo-672628-s-original.jpg" alt="" style=" "/> 
 
     </div> 
 
    </section>

希望它能帮助。

来源

2017-04-13 04:57:13 Chirag

相关问题

 相关问题