如何将 Bootstrap div 与“spanX”类居中？

Question

我使用 bootstrap 并尝试像这样将 div(span7) 居中：

<div class="row-fluid">
    <div id="main" class="span7">
        Lorem ipsum dolor sit amet
    </div>
</div>

我的css代码是：

#main{
    margin:0px auto;
}

但它没有设置在中心。如何设置中心？

编辑

span7 现在在 Bootstrap 4 中为 col-7，并且不推荐使用 row-fluid（取而代之的是 container-fluid 和 row）。

Answer 1

Twitter 的引导程序 .span 类浮动到左侧，因此它们不会以通常的方式居中。因此，如果您希望它使您的 span 居中，只需将 float:none 添加到您的 #main 规则中即可。

CSS

#main {
 margin:0 auto;
 float:none;
}

Answer 2

将宽度定义为 960 像素，或者任何你喜欢的，你就可以开始了！

#main {
 margin: 0 auto !important;
 float: none !important;
 text-align: center;
 width: 960px;
}

（在我固定宽度之前我无法弄清楚这一点，没有其他工作。）

Answer 3

顺便说一下，如果您的 span 类是偶数编号（例如 span8），您可以添加一个 offset 类以使其居中 - 对于 span8，它将是 offset2（假设默认为 12 列网格），对于span6，它将是offset3，依此类推（基本上，如果从网格中的总列数中减去span-number，则剩余列数的一半）。

更新 Bootstrap 3 renamed a lot of classes 所以所有span*classes 应该是col-md-* 而offset classes 应该是col-md-offset-*，假设你使用的是中型响应式网格。

我在这里创建了一个快速演示，希望对您有所帮助：http://codepen.io/anon/pen/BEyHd。

Answer 4

如果有人想要使用 bootstrap row-fluid 将图像和文本在一个范围内居中的真正解决方案，这里是（如何实现这一点，解释遵循我的示例）：

css

div.row-fluid [class*="span"] .center-in-span { 
   float: none; 
   margin: 0 auto; 
   text-align: center; 
   display: block; 
   width: auto; 
   height: auto;
}

html

<div class="row-fluid">
   <div class="span12">
      <img class="center-in-span" alt="MyExample" src="/path/to/example.jpg"/>
   </div>
</div>

<div class="row-fluid">
   <div class="span12">
      <p class="center-in-span">this is text</p>
   </div>
</div>

用法： 要使用这个 css 使图像在 span 中居中，只需将 .center-in-span 类应用于 img 元素，如上所示。

要使用此 css 使跨度内的文本居中，只需将 .center-in-span 类应用于 p 元素，如上所示。

说明： 这个 css 之所以有效，是因为我们覆盖了特定的引导样式。与发布的其他答案的显着区别是宽度和高度设置为自动，因此您不必使用固定的（适用于动态网页）。此外，将边距设置为 auto、text-align:center 和 display:block 的组合可以同时处理图像和段落。

让我知道这是否足够彻底以便于实施。

Answer 5

更新

从 BS3 开始，有一个 .center-block 助手类。来自文档：

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

// Usage as mixins
.element {
  .center-block();
}

这个看似简单的问题隐藏着复杂性。所有给出的答案都有一些问题。

1。创建自定义类（主要问题）

创建.col-centred 类，但有一个主要问题。

.col-centred {
   float: none !important;
   margin: 0 auto;
}

<!-- Bootstrap 3 -->
<div class="col-lg-6 col-centred">
  Centred content.
</div>
<!-- Bootstrap 2 -->
<div class="span-6 col-centred">
  Centred content.
</div>

陷阱

Bootstrap 要求列的总和为 12。如果不这样做，它们将重叠，这是一个问题。在这种情况下，居中的列将与其上方的列重叠。从视觉上看，页面可能看起来相同，但鼠标事件在重叠的列上不起作用（例如，您不能悬停或单击链接）。这是因为鼠标事件注册在与您尝试单击的元素重叠的居中列上。

修复

您可以使用clearfix 元素解决此问题。使用z-index 将居中的列置于底部将不起作用，因为它本身会重叠，因此鼠标事件将对其起作用。

<div class="row">
  <div class="col-lg-12">
    I get overlapped by `col-lg-7 centered` unless there's a clearfix.
  </div>
  <div class="clearfix"></div>
  <div class="col-lg-7 centred">
  </div>
</div>

或者您可以将居中的列隔离在自己的行中。

<div class="row">
  <div class="col-lg-12">
  </div>
</div>
<div class="row">
  <div class="col-lg-7 centred">
    Look I am in my own row.
  </div>
</div>

2。使用 col-lg-offset-x 或 spanx-offset（主要问题）

<!-- Bootstrap 3 -->
<div class="col-lg-6 col-lg-offset-3">
  Centred content.
</div>
<!-- Bootstrap 2 -->
<div class="span-6 span-offset-3">
  Centred content.
</div>

第一个问题是居中的列必须是偶数，因为偏移值必须除以 2 才能使布局居中（左/右）。

其次，正如一些人评论的那样，使用偏移量是一个坏主意。这是因为当浏览器调整大小时，偏移量会变成空白，将实际内容推到页面下方。

3。创建一个内部居中的列

这是我认为的最佳解决方案。根据解决方案 1 和 2，无需破解，也不会乱用网格，这可能会导致意想不到的后果。

.col-centred {
   margin: 0 auto;
}

<div class="row">
  <div class="col-lg-12">
    <div class="centred">
        Look I am in my own row.
    </div>
  </div>
</div>