bootstrap-4 - 如何在列中垂直居中文本( Bootstrap 4)？

Question

如何在列中垂直居中文本( bootstrap 4)？结构是基本的，见:

<div class="row">
    <div class="col-md-6">
        <span>Text to center</span>
    </div
</div>

伙计们!

Answer 1

您可以添加 my-auto给父类 <div class="col-md-6">为达到这个。此类在 y 轴上设置自动边距，有关更多详细信息，请参阅上面的链接。

它看起来像这样:

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

<div class="container">
  <div class="row">
    <div class="col-xs-6 my-auto">
      <span>Text to center</span>
    </div>
    <div class="col-xs-6">
      <h1>Hello</h1>
      <h1>Hello</h1>
      <h1>Hello</h1>
    </div>
  </div>
</div>

您可能会想使用 vertical alignment实用程序，但这些仅适用于内联、内联块、内联表和表格单元格元素。