Question

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

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

JSFiddle Demo

Answer 1

使用：

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

而不是

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

您也可以使用bootstrap 3 css：

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

Answer 2

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>

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/

Answer 3

我知道这个问题很旧。问题没有提到他正在使用哪个版本的Bootstrap。因此，我假设该问题的答案已解决。

如果你们中的任何一个（像我一样）偶然发现了这个问题，并使用最新的（2019）引导框架寻找答案，那么这就是解决方案。

引导程序4

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

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

如果列内有文本，并且您想将所有文本居中对齐。只需将text-center添加到同一课程即可。

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

Answer 4

使用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>

Answer 5

这是一种简单的方法。

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

数字6 控制列的宽度。

Answer 6

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

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

使用引导程序类align-items-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>

Answer 7

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

轻松地在列内水平对齐项目

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

Answer 8

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

Answer 9

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

Answer 10

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

Answer 11

如果以上方法均无效（例如在我的案例中，尝试使输入居中），则我使用Boostrap 4偏移量：

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

如何将内容集中在引导列中？

11 个答案:

引导程序4