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

但它不是设在中心位置。我该如何设置中心？

Answer 1

Twitter的bootstrap .span类浮动到左侧，因此它们不会通过常规方式居中。因此，如果您希望它以span为中心，只需将float:none添加到您的#main规则中。

<强> CSS

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

Answer 2

顺便提一下，如果您的span班级是偶数编号（例如span8），您可以添加offset班级来加以中心 - span8这将是offset2 1}}（假设默认的12列网格），对于span6，它将是offset3，依此类推（基本上，如果减去span - 数字，剩余列数的一半来自网格中的总列数。）

<强>更新 Bootstrap 3 renamed a lot of classes所以span*所有类应为col-md-*，offset类应为col-md-offset-*，假设您使用的是中型响应网格

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

Answer 3

如果有人想要真正的解决方案，使用bootstrap row-fluid在一个范围内对BOTH图像和文本进行居中，这里是（如何实现这一点，并按照我的例子进行解释）：

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>

USAGE：要使用此css将图像置于跨度中心，只需将.center-in-span类应用于img元素，如上所示。

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

说明：这个CSS有效，因为我们正在覆盖特定的引导程序样式。与发布的其他答案的显着差异在于宽度和高度设置为自动，因此您不必使用固定的（适用于动态网页）。另外，将边距设置为auto，text-align：center和display：block的组合可以处理图像和段落。

请告诉我这是否足够简单，以便于实施。

Answer 4

更新

从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>

The Gotcha

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（Major Gotcha）

<!-- 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>

Answer 5

将宽度定义为960px，或者你喜欢的任何东西，你很高兴去吧！

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

（在我修正宽度之前，我无法解决这个问题，没有其他工作。）

如何使用'spanX'类将Bootstrap div居中？

5 个答案:

更新

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

2。使用col-lg-offset-x或spanx-offset（Major Gotcha）

3。创建一个内部中心列