我想用一个非常基本的例子。使用入门页面和网格系统,我希望如下:
< div class = "行" > < div class = " span12”> <h1>引导启动器模板</h1> < / p > < p >示例文本。 < / div > < / div >
...会产生居中的文本。
然而,它仍然出现在最左边。我做错了什么?
我想用一个非常基本的例子。使用入门页面和网格系统,我希望如下:
< div class = "行" > < div class = " span12”> <h1>引导启动器模板</h1> < / p > < p >示例文本。 < / div > < / div >
...会产生居中的文本。
然而,它仍然出现在最左边。我做错了什么?
当前回答
您可以使用以下类型中的任何一种
使用Bootstrap现有的类文本中心。 添加自定义样式,style = "text-align:center"。 使用列偏移量: 例如:<div class="col-md-offset-6 col-md-12"></div>
其他回答
对于Bootstrap 3.1.1及以上版本,用于使内容居中的最佳类是.center-block helper类。
这是关于文本居中的(这就是问题的内容)
关于其他类型的内容,请参阅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/
类.show-grid在链接中的示例中应用居中对齐的文本。
你总是可以添加style="text-align:center"到你的行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>
我猜这里的大多数人实际上都在寻找将整个div居中的方法,而不仅仅是文本内容(这是微不足道的…)
在HTML中居中的第二种方法(而不是使用text-align:center)是让元素具有固定宽度和自动边距(左和右)。在Bootstrap中,定义自动边距的样式是“容器”类。
<div class="container">
<div class="span12">
"Centered stuff there"
</div>
</div>
看看这里的小提琴:http://jsfiddle.net/D2RLR/7788/