如何居中對齊兩個div與不同的內容？

我有兩個div s與不同的content.i.e。如何居中對齊兩個div與不同的內容？

<div class="container-fluid" style="background-color:#2c5fd9;"> 
 
    <div class="row" style="padding:10px 0;"> 
 
    <div class="col-lg-1" style="display:table-cell;vertical-align:middle;border-right:1px solid #fff;"> 
 
     <div style="width:100%;color:#fff;">-</div> 
 
    </div> 
 

 
    <div class="col-lg-10" style="display:table-cell;vertical-align:middle;padding:0 10px;"> 
 
     <h1>The three big ideas we hope you take away</h1> 
 
    </div> 
 
    </div> 
 
</div>

但我希望它上面顯示像的圖像。我該怎麼做？

來源

2015-10-05 Sohil Shah

請發佈您的相關CSS代碼，以及足夠的HTML。你也使用'twitter-bootstrap'？ – divy3993

是的，我正在使用twitter bootstrap。所有的CSS都是內聯的。沒有額外的CSS應用。我想要的效果與圖片 –

這應該是您的解決方案：

HTML

<div class="container-fluid custom-box"> 
    <div class="row"> 
     <div class="col-lg-1 line"> 
      <div class="hr"></div> 
     </div> 
     <div class="col-lg-10 content"> 
      <h1>The three big ideas we hope you take away</h1> 
     </div> 
    </div> 
</div>

CSS

.custom-box { 
    background-color:#00577b; 
    padding:30px 0; 
    width:700px; 
} 
.custom-box .line { 
    border-right:1px solid #fff; 
    display:table-cell; 
    padding:0; 
    vertical-align:middle; 
} 
.custom-box .content { 
    display:table-cell; 
    padding:10px 40px; 
    vertical-align:middle; 
} 
.custom-box .content h1 { 
    color:#fff; 
    padding:0; 
    margin:0; 
} 
.hr { 
    border-top:1px solid #fff; 
    height:1px; 
    width:75px; 
}

下面是一個小提琴嘗試：https://jsfiddle.net/sebastianbrosch/xat15tc1/1/

來源

2015-10-05 08:49:37

它不使用twitter引導工作。但只要我放置bootstrap.min.css它改變其佈局 –

明白了。有一個關於float的問題：left;適用於col-lg級。 –

這裏是更新代碼，它適用於我，希望它能解決您的問題。

<div class="container-fluid" style="background-color:#2c5fd9;"> 
     <div class="row" style="padding:10px 0; display:table; width:auto; margin:0px auto"> 
      <div class="col-lg-1" style="display:table-cell;vertical-align:middle;border-right:1px solid #fff;"> 
       <div style="width:100%;color:#fff;">-</div> 
      </div> 

      <div class="col-lg-10" style="display:table-cell;vertical-align:middle;padding:0 10px;"> 
       <h1 style="width:85%">The three big ideas we hope you take away</h1> 
      </div> 
     </div> 
    </div>

來源

2015-10-05 08:32:03 CreativePS

沒有一樣。它不起作用，它和以前一樣。添加樣式到行不起作用 –

如何居中對齊兩個div與不同的內容？

回答

相關問題