我想用一个非常基本的例子。使用入门页面和网格系统,我希望如下:
< 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>
其他回答
我创建了这个类来保持居中,无论屏幕大小,同时保持响应功能:
.container {
alignment-adjust: central;
}
如果你使用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 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>
不要主要使用容器流体。
在我这边,我定义了新的CSS样式,易于使用和记忆:
.center { text-align: center;}
.left { text-align: left;}
.right { text-align: right;}
.justify { text-align: justify;}
.fleft { float: left;} /*-> similar to .pull-left already existing in bootstrap*/
.fright { float: right;} /*-> similar to .pull-right already existing in bootstrap*/
.vab { vertical-align: bottom;}
.bold { font-weight: bold;}
.italic { font-style: italic;}
这是个好主意吗? 有什么好的做法吗?
最好的方法是定义一个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越少越好。