本文翻译自:How do you get centered content using Twitter Bootstrap?
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? 我究竟做错了什么?
#1楼
参考:https://stackoom.com/question/cXDJ/如何使用Twitter-Bootstrap获得中心内容
#2楼
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越少越好。
#3楼
If you are using Bootstrap 2.0+ 如果您使用的是Bootstrap 2.0+
This can make the div centered to the page. 这可以使div以页面为中心。
<div class="row">
<div class="span4 offset4">
//your content here gets centered of the page
</div>
</div>
#4楼
Any text-align utility class would do the trick. 任何文本对齐实用程序类都可以解决问题。 Bootstrap has been using .text-center
class for centering text for a long time now. Bootstrap已经使用.text-center
类来长时间居中文本了。
.text-center { text-align: center !important; }
Or you can create your own utilities. 或者您可以创建自己的实用程序。 Some variations I've seen over the years: 我多年来看到的一些变化:
.u-text-center { text-align: center !important; }
.ta-center { text-align: center !important; }
.ta\:c { text-align: center !important; }
#5楼
NOTE: this was removed in Bootstrap 3 . 注意:这在Bootstrap 3中被删除 。
Pre-Bootstrap 3, you could use the CSS class pagination-centered
like this: Pre-Bootstrap 3,你可以使用CSS类pagination-centered
如下所示:
<div class="span12 pagination-centered">
Centered content.
</div>
Class pagination-centered
is 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. 使用Bootstrap 2.3.0。 just use class text-center
只需使用类text-center
#6楼
On my side I define new CSS
styles ready to use and easy to remember: 在我这边,我定义了可以使用且易于记忆的新CSS
样式:
.center { text-align: center;}
.left { text-align: left;}
.right { text-align: right;}
.justify { text-align: justify;}
.fleft { float: left;} /*-> similar to .pull-left already existing in bootstrap*/
.fright { float: right;} /*-> similar to .pull-right already existing in bootstrap*/
.vab { vertical-align: bottom;}
.bold { font-weight: bold;}
.italic { font-style: italic;}
Is it a good idea? 这是个好主意吗? Is there any good practice for this? 这有什么好的做法吗?