我想用一个非常基本的例子。使用入门页面和网格系统,我希望如下:
< div class = "行" > < div class = " span12”> <h1>引导启动器模板</h1> < / p > < p >示例文本。 < / div > < / div >
...会产生居中的文本。
然而,它仍然出现在最左边。我做错了什么?
我想用一个非常基本的例子。使用入门页面和网格系统,我希望如下:
< div class = "行" > < div class = " span12”> <h1>引导启动器模板</h1> < / p > < p >示例文本。 < / div > < / div >
...会产生居中的文本。
然而,它仍然出现在最左边。我做错了什么?
当前回答
添加答案。希望它能帮助到别人
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class='d-flex flex-row justify-content-center'>
<img
className='img-fluid'
src="<url>"
/>
</div>
</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-->
我创建了这个类来保持居中,无论屏幕大小,同时保持响应功能:
.container {
alignment-adjust: central;
}
2018年更新:
在Bootstrap 4.1.3中,内容可以使用mx-auto类居中。
<div class="mx-auto">
Centered element
</div>
参考:https://getbootstrap.com/docs/4.1/utilities/spacing/ #水平居中
只需为你想要的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>
这是关于文本居中的(这就是问题的内容)
关于其他类型的内容,请参阅Flavien的回答。
更新:引导2.3.0+答案
最初的答案是bootstrap的早期版本。从引导2.3.0开始,你可以简单地给div命名为.text-center类。
原始答案(2.3.0之前)
您需要用text-align: center定义这两个类中的一个,row或span12。见http://jsfiddle.net/xKSUH/或http://jsfiddle.net/xKSUH/1/