我想用一个非常基本的例子。使用入门页面和网格系统,我希望如下:
< div class = "行" > < div class = " span12”> <h1>引导启动器模板</h1> < / p > < p >示例文本。 < / div > < / div >
...会产生居中的文本。
然而,它仍然出现在最左边。我做错了什么?
我想用一个非常基本的例子。使用入门页面和网格系统,我希望如下:
< div class = "行" > < div class = " span12”> <h1>引导启动器模板</h1> < / p > < p >示例文本。 < / div > < / div >
...会产生居中的文本。
然而,它仍然出现在最左边。我做错了什么?
当前回答
类.show-grid在链接中的示例中应用居中对齐的文本。
你总是可以添加style="text-align:center"到你的行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-->
我尝试了两种方法,它的工作很好,以中心的div。这两种方法都将对齐div在所有屏幕上。
方法1:使用Push:
<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-push-4 col-md-push-4 col-sm-push-4 col-xs-push-4" style="border-style:solid;border-width:1px">
<h2>Grievance form</h2> <!-- To center this text, use style="text-align: center" -->
</div>
方法2:使用偏移量:
<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-offset-4 col-md-offest-4 col-sm-offest-4 col-xs-offest-4" style="border-style:solid;border-width:1px">
<h2>Grievance form</h2> <!--to center this text, use style="text-align: center"-->
</div>
结果:
解释
Bootstrap将指定左边,指定屏幕占用的第一列。如果我们使用offset或push,它会将“this”列移动“that”列。虽然我遇到了一些问题,在响应补偿,推动是了不起的。
对于Bootstrap 3.1.1及以上版本,用于使内容居中的最佳类是.center-block helper类。
中心块也是一个选项没有提到以上的答案
<div class="center-block" style="width:200px;background-color:#ccc;">...</div>
类center-block所做的就是告诉元素的边距为0 auto, auto是左/右边距。但是,除非类text-center或css text-align:center;在父元素上设置时,元素不知道从哪个点进行自动计算,因此它不会像预期的那样居中。
所以文本中心是一个更好的选择。
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>