如何在列内垂直和水平居中文本？ [复制]

Posted 2023-03-05

【中文标题】如何在列内垂直和水平居中文本？ [复制]

【英文标题】：How to vertically and horizontally center text inside columns? [duplicate]

【发布时间】：2017-11-30 17:53:34

【问题描述】：

如何在两列中垂直和水平居中文本？我正在使用引导程序 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>

【问题讨论】：

h1 不能有任何子元素的块元素，只有短语内容:(

【参考方案1】：

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

水平对齐内容 justify-content: center;

要垂直对齐内容 align-items: center;

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

【参考方案2】：

这是你需要的吗？具有行高会更好地可视化。

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

【参考方案3】：

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

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

对齐项目

在 flexbox 容器上使用 align-items 实用程序来更改 flex 项目在交叉轴上的对齐方式（y 轴开始，x 轴如果 flex-direction: 列）。从开始、结束、中心、基线或拉伸中选择（浏览器默认）。

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