如何居中对齐两个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与不同的内容？

回答

相关问题