CSS 如何使用 Bootstrap2 将 div 居中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9382970/
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 to center a div with Bootstrap2?
提问by Alex
http://twitter.github.com/bootstrap/scaffolding.html
http://twitter.github.com/bootstrap/scaffolding.html
I tried like all combinations:
我尝试了所有组合：
<div class="row">
<div class="span7 offset5"> box </div>
</div>
or
或者
<div class="container">
<div class="row">
<div class="span7 offset5"> box </div>
</div>
</div>
changed span and offset numbers...
更改了跨度和偏移量...
But I cant get a simple box perfectly centered on a page :(
但我无法得到一个完美地以页面为中心的简单框:(
I just want a 6-column-wide box centered...
我只想要一个 6 列宽的框居中...
编辑：
did it with
用它做的
<div class="container">
<div class="row" id="login-container">
<div class="span8 offset2">
box
</div>
</div>
</div>
But the box is too wide, is there any way I can do it with span7 ?
但是盒子太宽了，我有什么办法可以用 span7 做到这一点吗？
span7 offset2gives extra padding to the left span7 offset3extra padding to the right...
span7 offset2给左边span7 offset3额外的填充右边额外的填充......
采纳答案by csturtz
besides shrinking the div itself to the size you want, by reducing span size like so... class="span6 offset3", class="span4 offset4", etc... something as simple as style="text-align: center"on the div could have the effect you're looking for
除了通过减少像这样跨度的大小股利本身萎缩到你想要的大小，... class="span6 offset3"，class="span4 offset4"等等......东西一样简单style="text-align: center"的DIV可以有你要找的效果
you can't use span7 with any set offset and get the span centered on the page (Because total spans = 12)
您不能将 span7 与任何设置的偏移量一起使用并使跨度居中在页面上（因为总跨度 = 12）
回答by Zuhaib Ali
Bootstrap's spans are floated to the left. All it takes to center them is override this behavior. I do this by adding this to my stylesheet:
Bootstrap 的跨度浮动到左侧。将它们居中所需的只是覆盖此行为。我通过将它添加到我的样式表来做到这一点：
.center {
float: none;
margin-left: auto;
margin-right: auto;
}
If you have this class defined, just add it to the span and you're good to go.
如果您定义了此类，只需将其添加到跨度中即可。
<div class="span7 center"> box </div>
Note that this custom center class must be defined afterthe bootstrap css. You could use !importantbut that isn't recommended.
请注意，此自定义中心类必须在 bootstrap css之后定义。您可以使用，!important但不建议这样做。
回答by Casey
回答by Craig
If you want to go full-bootstrap (and not the auto left/right way) you need a pattern that will fit within 12 columns e.g. 2 blanks, 8 content, 2 blanks. That's what this setup will do. It only covers the -md-variants, I tend to snap it to full size for small by adding col-xs-12
如果您想要完全引导（而不是自动左/右方式），您需要一个适合 12 列的模式，例如 2 个空格、8 个内容、2 个空格。这就是此设置将执行的操作。它仅涵盖-md-变体，我倾向于通过添加 col-xs-12 将其捕捉到全尺寸
<div class="container">
<div class="col-md-8 col-md-offset-2">
box
</div>
</div>
回答by cstrat
Sounds like you just wanted to center align a single container. The bootstrap framework might be overcomplicating that one example, you could have just had a standalone div with your own styling, something like:
听起来您只想居中对齐单个容器。bootstrap 框架可能会使该示例过于复杂，您可以拥有一个具有自己样式的独立 div，例如：
<div class="login-container">
<!-- Your Login Form -->
</div>
and style:
和风格：
.login-container {
margin: 0 auto;
width: 400px; /* Whatever exact width you are looking for (not bound by preset bootstrap widths) */
}
That should work fine if you are nested somewhere within a bootstrap .containerdiv.
如果您嵌套在引导.containerdiv 中的某处，那应该可以正常工作。
回答by mrpix
add the class centercontents
添加班级中心内容
/** Center the contents of the element **/
.centercontents {
text-align: center !important;
}
回答by jakson
@ZuhaibAli code kind of work for me but I changed it a little bit:
@ZuhaibAli 代码对我有用，但我对其进行了一些更改：
I created a new class in css
我在 css 中创建了一个新类
.center {
float: none;
margin-left: auto;
margin-right: auto;
}
then the div become
然后div变成
<div class="center col-md-6"></div>
I added col-md-6 for the width of the div itself which in this situation meant the div is half the size, there are 1 -12 col md in bootstrap.
我为 div 本身的宽度添加了 col-md-6，在这种情况下，这意味着 div 是大小的一半，引导程序中有 1 -12 col md。
回答by core114
Follow this guidance https://getbootstrap.com/docs/3.3/css/
按照此指南https://getbootstrap.com/docs/3.3/css/
Use .center-block
用 .center-block
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
回答by Mahmoud Farahat
wrap the div in a parent div with class rowthen add style margin:0 auto;to the div
用 classrow将div 包装在父 div 中，然后margin:0 auto;向 div添加样式
<div class="row">
<div style="margin: 0 auto;">center</div>
</div>
