Bootstrap4 垂直对齐

在栅格系统中可以使用垂直对齐。

• 行的垂直对齐
  • 上对齐align-items-start
  • 居中对齐align-items-center
  • 下对齐align-items-end
• 单元格的垂直对齐
  • 上对齐align-self-start
  • 居中对齐align-self-center
  • 下对齐align-self-end

示例

<div class="container">
  <p>垂直对齐</p>
  <p>垂直对齐 - 上对齐 - align-items-start</p>
  <div class="row align-items-start" style="min-height: 100px; background: #FFE5E5; border: solid 1px #ccc;">
    <div class="col">One of three columns</div>
    <div class="col">One of three columns</div>
    <div class="col">One of three columns</div>
  </div>
  <p>垂直对齐 - 居中对齐 - align-items-center</p>
  <div class="row align-items-center" style="min-height: 100px; background: #FFE5E5; border: solid 1px #ccc;">
    <div class="col">One of three columns</div>
    <div class="col">One of three columns</div>
    <div class="col">One of three columns</div>
  </div>
  <p>垂直对齐 - 下对齐 - align-items-end</p>
  <div class="row align-items-end" style="min-height: 100px; background: #FFE5E5; border: solid 1px #ccc;">
    <div class="col">One of three columns</div>
    <div class="col">One of three columns</div>
    <div class="col">One of three columns</div>
  </div>
  <p>单元格的垂直对齐 align-self-start align-self-center align-self-end</p>
  <div class="row" style="min-height: 100px; background: #FFE5E5; border: solid 1px #ccc;">
    <div class="col align-self-start">One of three columns</div>
    <div class="col align-self-center">One of three columns</div>
    <div class="col align-self-end">One of three columns</div>
  </div>
</div>