我想用一个非常基本的例子。使用入门页面和网格系统,我希望如下:
< div class = "行" > < div class = " span12”> <h1>引导启动器模板</h1> < / p > < p >示例文本。 < / div > < / div >
...会产生居中的文本。
然而,它仍然出现在最左边。我做错了什么?
我想用一个非常基本的例子。使用入门页面和网格系统,我希望如下:
< div class = "行" > < div class = " span12”> <h1>引导启动器模板</h1> < / p > < p >示例文本。 < / div > < / div >
...会产生居中的文本。
然而,它仍然出现在最左边。我做错了什么?
当前回答
Bootstrap 2.3有一个文本中心类。
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
其他回答
在保持响应性(移动兼容性)的同时,我更喜欢将信息块居中的方法是在您希望居中的内容之前和之后放置两个空span1 div。
<div class="row-fluid">
<div class="span1">
</div>
<div class="span10">
<div class="hero-unit">
<h1>Reading Resources</h1>
<p>Read here...</p>
</div>
</div><!--/span-->
<div class="span1">
</div>
</div><!--/row-->
从2013年2月开始,在某些情况下,我在“span”div中添加了一个“centric”类:
<div class="container">
<div class="row">
<div class="span9 centred">
This div will be centred.
</div>
</div>
</div>
和CSS:
[class*="span"].centred {
margin-left: auto;
margin-right: auto;
float: none;
}
这是因为span* div被浮动到左边,而“自动边缘”居中技术仅在div没有浮动的情况下才有效。
演示(在JSFiddle上):http://jsfiddle.net/5RpSh/8/embedded/result/
JSFiddle: http://jsfiddle.net/5RpSh/8/
我猜这里的大多数人实际上都在寻找将整个div居中的方法,而不仅仅是文本内容(这是微不足道的…)
在HTML中居中的第二种方法(而不是使用text-align:center)是让元素具有固定宽度和自动边距(左和右)。在Bootstrap中,定义自动边距的样式是“容器”类。
<div class="container">
<div class="span12">
"Centered stuff there"
</div>
</div>
看看这里的小提琴:http://jsfiddle.net/D2RLR/7788/
类.show-grid在链接中的示例中应用居中对齐的文本。
你总是可以添加style="text-align:center"到你的行div或其他类,我想。
中心块也是一个选项没有提到以上的答案
<div class="center-block" style="width:200px;background-color:#ccc;">...</div>
类center-block所做的就是告诉元素的边距为0 auto, auto是左/右边距。但是,除非类text-center或css text-align:center;在父元素上设置时,元素不知道从哪个点进行自动计算,因此它不会像预期的那样居中。
所以文本中心是一个更好的选择。