Html 你如何使用 Twitter Bootstrap 获得居中的内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9184141/
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 you get centered content using Twitter Bootstrap?
提问by Hoa
I'm trying to follow a very basic example. Using the starter page and the grid system, I was hoping the following:
我正在尝试遵循一个非常基本的示例。使用起始页和网格系统，我希望如下：
<div class="row">
<div class="span12">
<h1>Bootstrap starter template</h1>
<p>Example text.</p>
</div>
</div>...would produce centered text.
...会产生居中的文本。
However, it still appears on the far left. What am I doing wrong?
但是，它仍然出现在最左边。我究竟做错了什么？
回答by ScottS
This is for Text Centering (which is what the question was about)
这是用于文本居中（这就是问题所在）
For other types of content, see Flavien's answer.
对于其他类型的内容，请参阅Flavien 的回答。
Update: Bootstrap 2.3.0+ Answer
更新：Bootstrap 2.3.0+ 答案
The original answer was for an early version of bootstrap. As of bootstrap 2.3.0, you can simply give the div the class .text-center.
最初的答案是针对早期版本的引导程序。从 bootstrap 2.3.0 开始，您可以简单地为 div 提供 class.text-center。
Original Answer (pre 2.3.0)
原始答案（2.3.0 之前）
You need to define one of the two classes, rowor span12with a text-align: center. See http://jsfiddle.net/xKSUH/or http://jsfiddle.net/xKSUH/1/
您需要定义两个类之一，row或者span12使用text-align: center. 请参阅http://jsfiddle.net/xKSUH/或http://jsfiddle.net/xKSUH/1/
回答by Iurii.K
NOTE: this was removed in Bootstrap 3.
注意：这已在 Bootstrap 3中删除。
Pre-Bootstrap 3, you could use the CSS class pagination-centeredlike this:
在 Bootstrap 3 之前，您可以pagination-centered像这样使用 CSS 类：
<div class="span12 pagination-centered">
Centered content.
</div>
Class pagination-centeredis already in bootstrap.css (or bootstrap.min.css) and has the only one rule:
类pagination-centered已经在 bootstrap.css（或 bootstrap.min.css）中并且只有一个规则：
.pagination-centered{text-align:center;}
With Bootstrap 2.3.0.just use class text-center
使用Bootstrap 2.3.0。只需使用类text-center
回答by Flavien Volken
I guess most of the people here are actually searching for the way to center the whole divand not only the text content (which is trivial…).
我想这里的大多数人实际上都在寻找使整体居中的div方法，而不仅仅是文本内容（这是微不足道的......）。
The second way (instead of using text-align:center) to center things in HTML is to have an element with a fixed width and auto margin (left and right). With Bootstrap, the style defining auto margins is the "container" class.
第二种方法（而不是使用 text-align:center）在 HTML 中居中放置一个元素，它具有固定宽度和自动边距（左右）。使用 Bootstrap，定义自动边距的样式是“容器”类。
<div class="container">
<div class="span12">
"Centered stuff there"
</div>
</div>
Take a look here for a fiddle: http://jsfiddle.net/D2RLR/7788/
看看这里的小提琴：http: //jsfiddle.net/D2RLR/7788/
回答by Zim
Update 2019 - Bootstrap 4
2019 年更新 - Bootstrap 4
"Centered content" can mean many different things, and Bootstrap centering has changed a lot since the original post.
“居中内容”可能意味着许多不同的东西，自最初的帖子以来，Bootstrap 居中已经发生了很大的变化。
Horizontal Center
水平中心
Bootstrap 3
引导程序 3
text-centeris used fordisplay:inlineelementscenter-blockto centerdisplay:blockelementscol-*offset-*to center grid columns- see this answerto center the navbar
text-center用于display:inline元素center-block居中display:block元素col-*offset-*将网格列居中- 请参阅此答案以将导航栏居中
Demo Bootstrap 3 Horizontal Centering
Bootstrap 4
引导程序 4
text-centeris still used fordisplay:inlineelementsmx-autoreplacescenter-blockto centerdisplay:blockelementsoffset-*ormx-autocan be used to center grid columnsjustify-content-centerinrowcan also be used to centercol-*
text-center仍然用于display:inline元素mx-auto替换center-block为中心display:block元素offset-*或mx-auto可用于使网格列居中justify-content-centerinrow也可用于居中col-*
mx-auto(auto x-axis margins) will center display:blockor display:flexelements that have a defined width, (%, vw, px, etc..). Flexbox is used by defaulton grid columns, so there are also various flexbox centering methods.
mx-auto（自动 x 轴边距）将居中display:block或display:flex具有定义宽度的元素，（%，vw，px，等...）。Flexbox 默认用于网格列，因此也有各种 flexbox 居中方法。
DemoBootstrap 4 Horizontal Centering
Vertical Center
垂直中心
Now that Bootstrap 4 is flexbox by defaultthere are many different approaches to vertical alignment using: auto-margins, flexbox utils, or the display utilsalong with vertical align utils. At first "vertical align utils" seems obvious but these onlywork with inline and table display elements. Here are some Bootstrap 4 vertical centering options..
现在 Bootstrap 4默认是flexbox，有许多不同的垂直对齐方法使用：auto-margins、flexbox utils或显示 utils以及垂直对齐 utils。起初“垂直对齐实用程序”似乎很明显，但这些仅适用于内联和表格显示元素。这里有一些 Bootstrap 4 垂直居中选项。
1 - Vertical Center Using Auto Margins:
1 - 使用自动边距的垂直中心：
Another way to vertically center is to use my-auto. This will center the element within it's container. For example, h-100makes the row full height, and my-autowill vertically center the col-sm-12column.
另一种垂直居中的方法是使用my-auto. 这将使元素在其容器内居中。例如，h-100使行全高，并使列my-auto垂直居中col-sm-12。
<div class="row h-100">
<div class="col-sm-12 my-auto">
<div class="card card-block w-25">Card</div>
</div>
</div>
Vertical Center Using Auto Margins Demo
my-autorepresents margins on the vertical y-axis and is equivalent to:
my-auto表示垂直 y 轴上的边距，相当于：
margin-top: auto;
margin-bottom: auto;
2 - Vertical Center with Flexbox:
2 - 带有 Flexbox 的垂直中心：
Since Bootstrap 4 .rowis now display:flexyou can simply use align-self-centeron any column to vertically center it...
由于 Bootstrap 4.row现在是display:flex您可以简单地align-self-center在任何列上使用以将其垂直居中...
<div class="row">
<div class="col-6 align-self-center">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
or, use align-items-centeron the entire .rowto vertically center align all col-*in the row...
或者，align-items-center在整个行中使用.row垂直居中对齐所有col-*...
<div class="row align-items-center">
<div class="col-6">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
Vertical Center Different Height Columns Demo
3 - Vertical Center Using Display Utils:
3 - 使用 Display Utils 的垂直居中：
Bootstrap 4 has display utilsthat can be used for display:table, display:table-cell, display:inline, etc.. These can be used with the vertical alignment utilsto align inline, inline-block or table cell elements.
自举4具有显示utils的，可以被用于display:table，display:table-cell，display:inline等。这些可与所使用的垂直取向utils的要对齐的内联，内联块或表格单元格的元件。
<div class="row h-50">
<div class="col-sm-12 h-100 d-table">
<div class="card card-block d-table-cell align-middle">
I am centered vertically
</div>
</div>
</div>
回答by cornishninja
Bootstrap 3.1.1has a .center-blockclass for centering divs. See: http://getbootstrap.com/css/#helper-classes-center.
Bootstrap 3.1.1有一个.center-block用于居中 div的类。请参阅：http: //getbootstrap.com/css/#helper-classes-center。
Center content blocks Set an element to
display: blockand center viamargin. Available as a mixin and class.
中心内容块 将元素设置为
display: block并通过 居中margin。可作为 mixin 和 class 使用。
<div class="center-block">...</div>
Or, as others have already said, use the .text-centerclass to centre text.
或者，正如其他人已经说过的，使用.text-center类来居中文本。
回答by tomwolber
The best way to do this is define a css style:
最好的方法是定义一个 css 样式：
.centered-text {
text-align:center
}
Then where ever you need centered text you add it like so:
然后在需要居中文本的地方添加它，如下所示：
<div class="row">
<div class="span12 centered-text">
<h1>Bootstrap starter template</h1>
<p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
</div>
</div>
or if you just want the p tag centered:
或者如果你只是想要 p 标签居中：
<div class="row">
<div class="span12 centered-text">
<h1>Bootstrap starter template</h1>
<p class="centered-text">Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
</div>
</div>
The less inline css you use the better.
您使用的内联 css 越少越好。
回答by PAULDAWG
The class .show-grid is applying center aligned text in the example in the link.
.show-grid 类在链接的示例中应用居中对齐的文本。
You can always add style="text-align:center"to your row div or some other class I would think.
您可以随时添加style="text-align:center"到您的行 div 或我认为的其他一些类。
回答by bjfletcher
As of February 2013, in some cases, I add a "centred" class to the "span" div:
截至 2013 年 2 月，在某些情况下，我向“跨度”div 添加了“居中”类：
<div class="container">
<div class="row">
<div class="span9 centred">
This div will be centred.
</div>
</div>
</div>
and to CSS:
和 CSS：
[class*="span"].centred {
margin-left: auto;
margin-right: auto;
float: none;
}
The reason for this is because the span* div's get floated to the left, and the "auto margin" centering technique works only if the div is not floated.
这样做的原因是因为 span* div 向左浮动，并且“自动边距”居中技术仅在 div 未浮动时才起作用。
Demo (on JSFiddle): http://jsfiddle.net/5RpSh/8/embedded/result/
演示（在 JSFiddle 上）：http: //jsfiddle.net/5RpSh/8/embedded/result/
JSFiddle: http://jsfiddle.net/5RpSh/8/
JSFiddle：http: //jsfiddle.net/5RpSh/8/
回答by Stanley Wang
If you use Bootstrap 3, it also has built-in CSS class named .text-center. That's what you want.
如果您使用 Bootstrap 3，它还具有名为.text-center 的内置 CSS 类。那就是你想要的。
<div class="text-left">
left
</div>
<div class="text-center">
center
</div>
<div class="text-right">
right
</div>
Please see the example in jsfiddle. http://jsfiddle.net/ucheng/Q4Fue/
请参阅 jsfiddle 中的示例。http://jsfiddle.net/ucheng/Q4Fue/
回答by leonbloy
Bootstrap 2.3 has a text-centerclass.
Bootstrap 2.3 有一个text-center类。
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
