css - 流体布局中像素大小元素的精确中心 Twitter Bootstrap

Question

我对流体设计还比较陌生，所以希望我在摸索一番后不会错过这里显而易见的东西......

如何让 512x512 div 元素在容器流畅的 Twitter Bootstrap 布局中水平居中。 (顶部有可根据屏幕尺寸调整的流体元素。)

Answer 1

创建一个 fluid-row 容器来包裹您居中的元素。这将在您的 container-fluid 内的某个地方应用自动左右边距和 512px 的固定宽度为您的 div。

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;
}