中心兩個div在引導2.3.2行

Question

我有兩個div我想要中心並排對齊排列。我目前所處的中心位置是垂直方向，一格在另一格之上。什麼是正確的方式讓他們在行的中心從左到右。

HTML：

<div class="row-fluid"> 
    <div class="span12" style="border: 1px solid black;"> 
    <div class="span2 center" style="border: 1px solid blue;"> 
     <p> 
     This is div1 ... 
     </p> 
    </div> 
    <div class="span2 center" style="border: 1px solid red; float:left;"> 
     <h4>Header in div 2</h4> 
     <div> 
     <p> 
      This is div 2 ... 
     </p> 
     </div> 
    </div> 
    </div> 
</div> 

CSS：

@media (min-width: 1076px) and (min-width: 979px) { 
    .row-fluid .span2 { 
     margin-left: 5.5%; 
    } 
    } 

    @media (max-width: 979px) and (min-width: 768px) { 
    .row-fluid .span2 { 
     margin-left: 5.5%; 
    } 
    } 

    .center { 
    float: none !important; 
    margin-left: auto !important; 
    margin-right: auto !important; 
    } 

的jsfiddle：https://jsfiddle.net/v7oucy63/

Answer 1

的jsfiddle：https://jsfiddle.net/v7oucy63/1/

我會在元素中使用display: inline-block，然後添加一個text-align: center父容器。請記住，text-align: center將影響所有子節點，因此請向該元素添加另一個text-align: left。