1. 首頁
  2. 問答
  3. HTML CSS外層div文本居中對齊，DIV文本對齊左內

HTML CSS外層div文本居中對齊，DIV文本對齊左內

2017-04-13 88 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

相關問題

 相關問題