小编典典

如何在 Bootstrap 列中居中内容?

all

我正在尝试将列的内容居中。看起来它不适合我。这是我的 HTML:

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

JSFiddle 演示


阅读 99

收藏
2022-06-24

共1个答案

小编典典

利用:

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

代替

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

您还可以使用 bootstrap 3 css:

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

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

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

请注意,默认情况下,x-axis除非flex-directioncolumn

2022-06-24