如何在引导列中将内容居中? [英] How to center content in a bootstrap column?
本文介绍了如何在引导列中将内容居中?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试将列的内容居中.看起来不适合我.这是我的HTML:
I am trying to center column's content. Does not look like it works for me. Here is my HTML:
<div class="row">
<div class="col-xs-1 center-block">
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
推荐答案
使用:
<!-- unsupported by HTML5 -->
<div class="col-xs-1" align="center">
代替
<div class="col-xs-1 center-block">
您还可以使用bootstrap 3 css:
You can also use bootstrap 3 css:
<!-- recommended method -->
<div class="col-xs-1 text-center">
Bootstrap 4现在具有将内容居中的flex类:
Bootstrap 4 now has flex classes that will center the content:
<div class="d-flex justify-content-center">
<div>some content</div>
</div>
请注意,默认情况下它将是 x轴
,除非 flex-direction
是 column
Note that by default it will be x-axis
unless flex-direction
is column
这篇关于如何在引导列中将内容居中?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文