如何在 Bootstrap 列中居中内容？答案

【问题标题】：How to center content in a Bootstrap column?如何在 Bootstrap 列中居中内容？
【发布时间】：2016-05-11 19:55:44
【问题描述】：

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

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

JSFiddle Demo

【问题讨论】：

你要做什么，将span 对齐在.col-xs-1 的中心或将col-xs-1 对齐在.row 的中心？
我正在尝试对齐列内的任何内容，或者更好的是在单元格中。
有显得愚蠢的风险，将其沿哪个轴居中？

标签： html css twitter-bootstrap

【解决方案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-direction 是 column

【讨论】：

顺便把col-xs-1改成col-xs-12。这可能是你的错字。
HTML5 不支持
align 属性。
即使 'align' 属性仍然可用，长时间使用它也被认为是一种不好的做法。请使用“文本中心”类
谢谢！使用 bootstrap 3 方法也为我解决了这个问题。
“文本中心”类对我不起作用，因为我有一个按钮和一个加载微调器 div。添加引导类“d-flex justify-content-around”为我解决了。

【解决方案2】：

[2020 年 12 月更新]：经过测试并包含 5.0 版本的 Bootstrap。

我知道这个问题很老了。而且问题没有提到他使用的是哪个版本的 Bootstrap。所以我假设这个问题的答案已经解决了。

如果你们中的任何人（像我一样）偶然发现了这个问题并使用当前的 bootstrap 5.0（2020）和 4.5（2019）框架寻找答案，那么这就是解决方案。

引导 4.5 和 5.0

在您的列 div 上使用 d-flex justify-content-center。这将使该列内的所有内容居中。

<div class="row">
    <div class="col-4 d-flex justify-content-center">
        // Image
    </div>
</div>

如果要对齐 col 内的文本，只需使用 text-center

<div class="row">
    <div class="col-4 text-center">
        // text only
    </div>
</div>

如果栏内有文字和图片，需要使用d-flexjustify-content-center和text-center。

<div class="row">
    <div class="col-4 d-flex justify-content-center text-center">
        // for image and text
    </div>
</div>

【讨论】：

<div class="col text-center"> 为我工作。这个答案是比官方引导文档更好的文档。
我在 div 中使用了多个按钮。我希望它们位于 div 的中心。
做到了。谢谢。

【解决方案3】：

Bootstrap 命名约定带有自己的样式，col-XS-1 指的是包含元素宽度的 8.33% 的列。您的文本很可能会扩展到远远超出指定宽度，并且不可能在其中居中。如果你想让它限制在 div 中，你可以使用类似 css word-break 的东西。

要使元素内的内容居中，足以扩展到文本之外，您有两种选择。

选项 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>

弹性盒方法

<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/

【讨论】：

是的，如果我使用 lg 列而不是 xs，这似乎有效。但是，如果我只有一列，那一列不应该占用尽可能多的空间吗？考虑到在三种不同分辨率的三种浏览器中工作的事实，我如何知道使用哪一列？
引导列使用基于响应百分比的宽度，因此无论分辨率如何，它们都应该非常相似。但是，如果您希望它们在隔离时占据 100% 的宽度，则必须覆盖 width 和 min-width 属性。

【解决方案4】：

Bootstrap 4/Bootstrap 5，使用弹性框水平和垂直对齐内容

<div class="page-hero d-flex align-items-center justify-content-center">
 <h1>Some text </h1>
</div>

使用引导类 align-items-center 和 justify-content-center

.page-hero {
  height: 200px;
  background-color: grey;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="page-hero d-flex align-items-center justify-content-center">
  <h1>Some text </h1>
</div>

【讨论】：

【解决方案5】：

无需使事情复杂化。使用 Bootstrap 4，您可以使用边距自动类 my-auto

简单地在列内水平对齐项目

         <div class="col-md-6 my-auto">
           <h3>Lorem ipsum.</h3>
         </div>

【讨论】：

【解决方案6】：

使用text-center 代替center-block。

或者在 span 元素上使用center-block（我把列加宽了，这样你可以更好地看到对齐方式）：

<div class="row">
   <div class="col-xs-10" style="background-color:#123;">
      <span class="center-block" style="width:100px; background-color:#ccc;">abc</span>
   </div>
</div>

【讨论】：

【解决方案7】：

这是一个简单的方法。

<div class="row">
  <div class="col-md-6 mx-auto">
    <p>My text</p>
  </div>
</div>

数字 6 控制列的宽度。

【讨论】：

【解决方案8】：

//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>

【讨论】：

【解决方案9】：

col-lg-4 col-md-6 col-sm-8 col-11 mx-auto

 1. col-lg-4 ≥ 1200px (popular 1366, 1600, 1920+)
 2. col-md-6 ≥ 970px (popular 1024, 1200)
 3. col-sm-8 ≥ 768px (popular 800, 768)
 4. col-11 set default smaller devices for gutter (popular 600,480,414,375,360,312)
 5. mx-auto = always block center

【讨论】：

【解决方案10】：

您可以添加float:none; margin:auto; 样式以使列内容居中。

【讨论】：

【解决方案11】：

如果上述方法都不起作用（比如我试图将输入居中），我使用了 Boostrap 4 偏移：

<div class="row">
    <div class="col-6 offset-3">
        <input class="form-control" id="myInput" type="text" placeholder="Search..">
    </div>
</div>

【讨论】：