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

Question

我对流体设计还比较陌生，所以希望我在经过一番摸索后不会错过这里的明显内容......

如何让一个 512x512 的 div 元素在容器流动的 Twitter Bootstrap 布局中水平居中。（顶部有可根据屏幕大小调整的流体元素。）

Answer 1

创建一个fluid-row容器来包装居中的元素。这将在您的container-fluidApply auto 左右边距和 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;
}