如何在列内垂直和水平居中文本？

Question

如何在两列中垂直和水平居中文本？我正在使用bootstrap 4。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">

<div class="row">

  <div class="col">
    <h1>
      <p> hello hello hello hello hello hello hello hello hello hello hello hello
      </p>

    </h1>

  </div>
  <div class="col">
    <p> hello hello hello hello hello hello hello hello hello hello hello hello
    </p>
  </div>
</div>

Answer 1

这是你需要的吗？行的高度可以更好地显示。

.col {
  display: flex;
  justify-content: center;
  align-items: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="row">
  <div class="col">
    <h1>
      <p> hello hello hello hello hello hello hello hello hello hello hello hello
      </p>
    </h1>
  </div>
  <div class="col">
    <p> hello hello hello hello hello hello hello hello hello hello hello hello
    </p>
  </div>
</div>

Answer 2

使用“display：flex”属性并应用这些......

对齐内容水平对齐内容：中心;

垂直对齐内容align-items：center;

.col {
    display: flex;
    justify-content: center;
    align-items: center;
}

Answer 3

您可以通过专用类使用flexbox属性：

https://v4-alpha.getbootstrap.com/utilities/flexbox/#align-items

  

对齐项目

     

在flexbox容器上使用align-items实用程序来更改横轴上的flex项目的对齐方式（y轴为start，x轴为flex-direction：column）。从开始，结束，居中，基线或拉伸中选择（浏览器默认值）。

＆＃13;

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">

<div class="row">

  <div class="col d-flex align-items-center ">
    <h1>
      <p> hello hello hello hello hello hello hello hello hello hello hello hello
      </p>

    </h1>

  </div>
  <div class="col d-flex align-items-center">
    <p> hello hello hello hello hello hello hello hello hello hello hello hello
    </p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;