ブートストラップの中央に2つのdiv 2.3.2の行

Question

2つのdivがあります。私は現在、それらを中心にしていますが、上下に1つの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を要素に追加することに注意してください。