如何在 Bootstrap 列中居中内容? [英] How to center content in a Bootstrap column?

问题描述

我正在尝试将列的内容居中.看起来对我不起作用.这是我的 HTML:

<div class="col-xs-1 center-block"><span>aaaaaaaaaaaaaaaaaaaaaaaaa</span>

JSFiddle 演示

解决方案

使用:

<div class="col-xs-1";对齐=中心">

代替

你也可以使用 bootstrap 3 css:

<div class="col-xs-1 text-center">

Bootstrap 4 现在具有将内容居中的 flex 类:

<div>一些内容</div>

注意默认情况下它会是 x-axis 除非 flex-direction 是 column

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>

JSFiddle Demo

解决方案

Use:

<!-- unsupported by HTML5 -->
<div class="col-xs-1" align="center">

instead of

<div class="col-xs-1 center-block">

You can also use bootstrap 3 css:

<!-- recommended method -->
<div class="col-xs-1 text-center">

Bootstrap 4 now has flex classes that will center the content:

<div class="d-flex justify-content-center">
   <div>some content</div>
</div>

Note that by default it will be x-axis unless flex-direction is column

这篇关于如何在 Bootstrap 列中居中内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！