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>This is for Text Centering (which is what the question was about)
For other types of content, see Flavien's answer.
Update: Bootstrap 2.3.0+ Answer
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 .
Original Answer (pre 2.3.0)
You need to define one of the two classes, row or span12 with a text-align: center . See http://jsfiddle.net/xKSUH/ or http://jsfiddle.net/xKSUH/1/
NOTE: this was removed in Bootstrap 3.
Pre-Bootstrap 3, you could use the CSS class pagination-centered like this:
<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{text-align:center;}
With Bootstrap 2.3.0. just use class text-center
I guess most of the people here are actually searching for the way to center the whole div and not only the text content (which is trivial…).
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.
<div class="container">
<div class="span12">
"Centered stuff there"
</div>
</div>
Take a look here for a fiddle: http://jsfiddle.net/D2RLR/7788/
链接地址: http://www.djcxy.com/p/13244.html