我正试图将列的内容居中。看起来对我没用啊。这是我的HTML:
<div class="row">
<div class="col-xs-1 center-block">
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
JSFiddle演示
我正试图将列的内容居中。看起来对我没用啊。这是我的HTML:
<div class="row">
<div class="col-xs-1 center-block">
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
JSFiddle演示
当前回答
你可以添加float:none;保证金:汽车;样式化以使列内容居中。
其他回答
[2022年4月更新]:测试并包括5.1版本的引导。
我知道这个问题很老了。这个问题并没有提到他使用的是哪个版本的Bootstrap。所以我假设这个问题的答案已经解决了。
如果你们中的任何人(像我一样)偶然发现了这个问题,并使用当前的bootstrap 5.0(2020)和4.5(2019)框架寻找答案,那么这里有解决方案。
引导4.5、5.0和5.1
在列div上使用d-flex justify-content-center,这将使列内的所有内容居中。
<div class="row">
<div class="col-4 d-flex justify-content-center">
// Image
</div>
</div>
如果你想在col内对齐文本,只需使用文本中心
<div class="row">
<div class="col-4 text-center">
// text only
</div>
</div>
如果列中有文本和图像,则需要使用d-flex justify-content-center和text-center。
<div class="row">
<div class="col-4 d-flex justify-content-center text-center">
// for image and text
</div>
</div>
引导命名约定有自己的样式,col-XS-1指的是包含元素宽度的8.33%的列。你的文本很可能会远远超出指定的宽度,并且不可能居中。如果你想要它约束到div,你可以使用像css的断字。
要将内容集中在一个大到足以展开到文本之外的元素中,有两个选项。
选项1:HTML中心标签
<div class="row">
<div class="col-xs-1 center-block">
<center>
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</center>
</div>
</div>
选项2:CSS文本对齐
<div class="row">
<div class="col-xs-1 center-block" style="text-align:center;">
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
如果你想把所有东西都限制在列的宽度
<div class="row">
<div class="col-xs-1 center-block" style="text-align:center;word-break:break-all;">
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
更新-使用Bootstrap的文本中心类
<div class="row">
<div class="col-xs-1 center-block text-center">
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
FlexBox方法
<div class="row">
<div class="flexBox" style="
display: flex;
flex-flow: row wrap;
justify-content: center;">
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
http://jsfiddle.net/usth0kd2/13/
//add this to your css
.myClass{
margin 0 auto;
}
// add the class to the span tag( could add it to the div and not using a span
// at all
<div class="row">
<div class="col-xs-1 center-block">
<span class="myClass">aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
你可以添加float:none;保证金:汽车;样式化以使列内容居中。
没必要把事情复杂化。使用Bootstrap 4,您可以简单地使用边缘自动类my-auto在列内水平对齐项
<div class="col-md-6 my-auto">
<h3>Lorem ipsum.</h3>
</div>