如何将列中的文本垂直居中(bootstrap 4)？

Question

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

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

Ty伙计们!

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>

您可能想要使用垂直对齐实用程序,但这些实用程序仅适用于内联,内联块,内联表和表格单元格元素.

Answer 2

另一个选择是使用flexbox实用程序 ..

<div class="container">
    <div class="row">
        <div class="col-md-6 align-self-center">
            <span>Text to center</span>
        </div>
        <div class="col-md-6">
            <p>
            ..
            </p>
        </div>
    </div>
</div>

http://www.codeply.com/go/oy8H1bUOL1

此外,在我的另一个答案中解释了其他几个Bootstrap垂直居中选项.