我想用一个非常基本的例子。使用入门页面和网格系统，我希望如下:
< 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>
其他回答
对于Bootstrap 3.1.1及以上版本，用于使内容居中的最佳类是.center-block helper类。
<div class="container">
<div class="col-md-12 centered">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
label
</div>
<div class="col-md-1"></div>
</div>
</div>
</div>
不要主要使用容器流体。
只需为你想要的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>
从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/
最好的方法是定义一个css样式:
.centered-text {
text-align:center
}
然后在你需要居中文本的地方，像这样添加它:
<div class="row">
<div class="span12 centered-text">
<h1>Bootstrap starter template</h1>
<p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
</div>
</div>
或者如果你只想让p标签居中:
<div class="row">
<div class="span12 centered-text">
<h1>Bootstrap starter template</h1>
<p class="centered-text">Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
</div>
</div>
你使用的内联css越少越好。
