我想用一个非常基本的例子。使用入门页面和网格系统,我希望如下:
< div class = "行" > < div class = " span12”> <h1>引导启动器模板</h1> < / p > < p >示例文本。 < / div > < / div >
...会产生居中的文本。
然而,它仍然出现在最左边。我做错了什么?
我想用一个非常基本的例子。使用入门页面和网格系统,我希望如下:
< div class = "行" > < div class = " span12”> <h1>引导启动器模板</h1> < / p > < p >示例文本。 < / div > < / div >
...会产生居中的文本。
然而,它仍然出现在最左边。我做错了什么?
当前回答
在保持响应性(移动兼容性)的同时,我更喜欢将信息块居中的方法是在您希望居中的内容之前和之后放置两个空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-->
其他回答
类.show-grid在链接中的示例中应用居中对齐的文本。
你总是可以添加style="text-align:center"到你的行div或其他类,我想。
如果你使用Bootstrap 3,它也有内置的CSS类命名为.text-center。这就是你想要的。
<div class="text-left">
left
</div>
<div class="text-center">
center
</div>
<div class="text-right">
right
</div>
请参阅jsfiddle中的示例。http://jsfiddle.net/ucheng/Q4Fue/
只需为你想要的div或标签使用一个类,text-center。我认为它可能会很好。它是一个用于文本对齐中心的引导类。
下面是一些文本对齐引导类:
text-left, text-right, text-justify, etc.
<div class="row">
<div class="col-md-12 text-center">
<h1>Bootstrap starter template</h1>
<p>Example text.</p>
</div>
</div>
如果你使用Bootstrap 2.0+
这可以使div居中于页面。
<div class="row">
<div class="span4 offset4">
//your content here gets centered of the page
</div>
</div>
对于Bootstrap 3.1.1及以上版本,用于使内容居中的最佳类是.center-block helper类。