css - 如何使用 Bootstrap2 使 div 居中？

Question

我尝试了所有组合：

<div class="row">
  <div class="span7 offset5"> box </div>
</div>

或者

<div class="container">
  <div class="row">
    <div class="span7 offset5"> box </div>
  </div>  
</div>

更改了跨度和偏移量...

但我无法得到一个完美居中页面的简单框:(

我只想要一个 6 列宽的框居中...

编辑：

用

<div class="container">
  <div class="row" id="login-container">
    <div class="span8 offset2">
       box
    </div>
  </div>
</div>

但是盒子太宽了，有什么办法可以用 span7 做吗？

span7 offset2给左边span7 offset3额外的填充右边的额外填充...

score 165 · Accepted Answer

Bootstrap 的跨度向左浮动。使它们居中所需的只是覆盖此行为。我通过将其添加到我的样式表来做到这一点：

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

如果您定义了此类，只需将其添加到跨度中即可。

<div class="span7 center"> box </div>

请注意，此自定义中心类必须在引导 css之后定义。您可以使用!important，但不建议这样做。

score 46 · Accepted Answer

除了将 div 本身缩小到您想要的大小之外，还可以通过减小 span 大小，例如... class="span6 offset3"、class="span4 offset4"等...像style="text-align: center"div 上这样简单的东西可能会产生您想要的效果

您不能将 span7 与任何设置的偏移量一起使用，并使跨度居中在页面上（因为总跨度 = 12）

score 34 · Accepted Answer

Bootstrap3 有.center-block你可以使用的类。它被定义为

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

score 21 · Accepted Answer

如果您想完全引导（而不是自动左/右方式），您需要一个适合 12 列的模式，例如 2 个空白、8 个内容、2 个空白。这就是这个设置要做的事情。它仅涵盖-md-变体，我倾向于通过添加 col-xs-12 将其缩小为全尺寸

<div class="container">
  <div class="col-md-8 col-md-offset-2">
     box
  </div>
</div>

score 8 · Accepted Answer

听起来您只想将单个容器居中对齐。引导框架可能过于复杂了一个例子，你可能有一个独立的 div 有你自己的样式，比如：

<div class="login-container">
  <!-- Your Login Form -->
</div>

和风格：

.login-container {
  margin: 0 auto;
  width: 400px; /* Whatever exact width you are looking for (not bound by preset bootstrap widths) */
}

如果您嵌套在引导.containerdiv 中的某个位置，那应该可以正常工作。

score 3 · Accepted Answer

添加类中心内容

/** Center the contents of the element **/
.centercontents {
    text-align: center !important;
}

score 0 · Accepted Answer

@ZuhaibAli 代码对我来说有点用，但我做了一点改动：

我在 css 中创建了一个新类

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

然后 div 变成

<div class="center col-md-6"></div>

我为 div 本身的宽度添加了 col-md-6，在这种情况下，这意味着 div 是一半大小，引导程序中有 1 -12 col md。

score 0 · Accepted Answer

采用.center-block

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

score 0 · Accepted Answer

用类将 div 包装在父 div 中，row然后将样式添加margin:0 auto;到 div

<div class="row">
  <div style="margin: 0 auto;">center</div>
</div>

9 回答 9