css - 流体レイアウトのピクセルサイズの要素の正確な中心 Twitter Bootstrap

Question

私はまだ流動的なデザインに比較的慣れていないので、少し手探りした後にここで明らかなことを見逃していないことを願っています...

512x512 の div 要素をコンテナー流動の Twitter Bootstrap レイアウトで水平方向に中央揃えするにはどうすればよいですか? (上部に画面サイズに合わせて調整される流動的な要素があります。)

Answer 1

fluid-row中央揃えの要素をラップするコンテナーを作成します。container-fluidこれは、 Apply auto left-および right-margins内のどこかに移動し、div の 512px の固定幅になります。

HTML:

  <div class="row-fluid">
    <div class="span12">
      <div class="centered512px">
         <h2>512 px Centered DIV</h2>
         <p>Donec id elit non mi porta gravida at eget metus.</p>
      </div>
    </div>
  </div>

CSS:

.centered512px {
    width: 512px;
    margin: 10px auto;
    background-color: red;
}