CSS 如何将 Bootstrap div 与“spanX”类居中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9554724/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I center a Bootstrap div with a 'spanX' class?
提问by sundowatch
I use bootstrap and am trying to center a div(span7) like that:
我使用引导程序并试图将一个 div(span7) 居中：
<div class="row-fluid">
<div id="main" class="span7">
Lorem ipsum dolor sit amet
</div>
</div>
my css code is:
我的 css 代码是：
#main{
margin:0px auto;
}
But it isn't set at the center. How can i set center?
但它没有设置在中心。我如何设置中心？
EDIT
编辑
span7is now col-7in Bootstrap 4
span7现在col-7在 Bootstrap 4
回答by Andres Ilich
Twitter's bootstrap .spanclasses are floated to the left so they won't center by usual means. So, if you want it to center your spansimply add float:noneto your #mainrule.
Twitter 的引导.span类浮动到左侧，因此它们不会通过通常的方式居中。所以，如果你想让它居中，你span只需添加float:none到你的#main规则中。
CSS
CSS
#main {
margin:0 auto;
float:none;
}
回答by spinningarrow
Incidentally, if your spanclass is even-numbered (e.g. span8) you can add an offsetclass to center it –?for span8that would be offset2(assuming the default 12-column grid), for span6it would be offset3and so on (basically, half the number of remaining columns if you subtract the span-number from the total number of columns in the grid).
顺便说一句，如果你的span类是偶数（例如span8），你可以添加一个offset类来居中它 -？因为span8那将是offset2（假设默认的 12 列网格），因为span6它会是offset3等等（基本上，一半的数量如果span从网格中的总列数中减去-number，则剩余列数）。
UPDATEBootstrap 3 renamed a lot of classesso all the span*classes should be col-md-*and the offsetclasses should be col-md-offset-*, assuming you're using the medium-sized responsive grid.
UPDATEBootstrap 3重命名了很多类，因此假设您使用的是中等大小的响应式网格，则所有span*类都应该是col-md-*，offset类应该是col-md-offset-*。
I created a quick demo here, hope it helps: http://codepen.io/anon/pen/BEyHd.
我在这里创建了一个快速演示，希望它有所帮助：http: //codepen.io/anon/pen/BEyHd。
回答by mkralla11
If anyone wants the true solution for centering BOTH images and text within a span using bootstrap row-fluid, here it is (how to implement this and explanation follows my example):
如果有人想要使用 bootstrap row-fluid 在跨度内居中图像和文本的真正解决方案，这里是（如何实现这一点，并按照我的示例进行解释）：
css
css
div.row-fluid [class*="span"] .center-in-span {
float: none;
margin: 0 auto;
text-align: center;
display: block;
width: auto;
height: auto;
}
html
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: To use this css to center an image within a span, simply apply the .center-in-span class to the img element, as shown above.
用法：要使用此 css 在跨度内居中图像，只需将 .center-in-span 类应用到 img 元素，如上所示。
To use this css to center text within a span, simply apply the .center-in-span class to the p element, as shown above.
要使用此 css 在跨度内居中文本，只需将 .center-in-span 类应用到 p 元素，如上所示。
EXPLANATION: This css works because we are overriding specific bootstrap styling. The notable differences from the other answers that were posted are that the width and height are set to auto, so you don't have to used a fixed with (good for a dynamic webpage). also, the combination of setting the margin to auto, text-align:center and display:block, takes care of both images and paragraphs.
解释：这个 css 有效是因为我们覆盖了特定的引导程序样式。与发布的其他答案的显着区别是宽度和高度设置为自动，因此您不必使用固定（适用于动态网页）。此外，将边距设置为 auto、text-align:center 和 display:block 的组合处理图像和段落。
Let me know if this is thorough enough for easy implementation.
让我知道这是否足够彻底以便于实施。
回答by Mohamad
Update
更新
As of BS3 there's a .center-blockhelper class. From the docs:
从 BS3 开始，有一个.center-block助手类。从文档：
// Classes
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as mixins
.element {
.center-block();
}
There is hidden complexity in this seemingly simple problem. All the answers given have some issues.
在这个看似简单的问题中隐藏着复杂性。所有给出的答案都有一些问题。
1. Create a Custom Class (Major Gotcha)
1. 创建自定义类（主要问题）
Create .col-centredclass, but there is a major gotcha.
创建.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 requires columns add up to 12. If they do not they will overlap, which is a problem. In this case the centred column will overlap the column above it. Visually the page may look the same, but mouse events will not work on the column being overlapped (you can't hover or click links, for example). This is because mouse events are registering on the centred column that's overlapping the elements you try to click.
Bootstrap 需要的列加起来为 12。如果没有，它们会重叠，这是一个问题。在这种情况下，居中的列将与其上方的列重叠。从视觉上看，页面可能看起来相同，但鼠标事件在重叠的列上不起作用（例如，您不能悬停或单击链接）。这是因为鼠标事件在与您尝试单击的元素重叠的居中列上注册。
The Fixes
修复
You can resolve this issue by using a clearfixelement. Using z-indexto bring the centred column to the bottom will not work because it will be overlapped itself, and consequently mouse events will work on it.
您可以通过使用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>
Or you can isolate the centred column in its own row.
或者您可以将居中的列隔离在其自己的行中。
<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. Use col-lg-offset-x or spanx-offset (Major Gotcha)
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>
The first problem is that your centred column must be an even number because the offset value must divide evenly by 2 for the layout to be centered (left/right).
第一个问题是您的居中列必须是偶数，因为偏移值必须除以 2 才能使布局居中（左/右）。
Secondly, as some have commented, using offsets is a bad idea. This is because when the browser resizes the offset will turn into blank space, pushing the actual content down the page.
其次，正如一些人所评论的那样，使用偏移量是一个坏主意。这是因为当浏览器调整大小时，偏移量将变成空白，将实际内容向下推入页面。
3. Create an Inner Centred Column
3.创建一个内部居中列
This is the best solution in my opinion. No hacking required and you don't mess around with the grid, which could cause unintended consequences, as per solutions 1 and 2.
这是我认为最好的解决方案。根据解决方案 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>
回答by ATSiem
Define the width as 960px, or whatever you prefer, and you're good to go!
将宽度定义为 960px 或任何您喜欢的值，您就可以开始了！
#main {
margin: 0 auto !important;
float: none !important;
text-align: center;
width: 960px;
}
(I couldn't figure this out until I fixed the width, nothing else worked.)
（在我固定宽度之前我无法弄清楚这一点，没有其他工作。）
