html - 如何在我的 Bootstrap 4 列中垂直居中文本

Question

我有一个特定的专栏，我似乎无法在我的 Bootstrap 4 专栏中将内容垂直居中。我尝试添加类 my-auto 和/或 align-self-center 但无济于事。 (尽管 align-self-center 似乎正在处理另一列的内容。)

我试图在此处将#jumboNote div 中的文本垂直居中:

<div id="jumbo" class="row">
      <div id="jumboNote" class="my-auto align-self-center col-md-3">
        <h3>I want to vertically align this text in this div, like the animals list in the center div above</h3>
      </div>
</div>

这是我的 fiddle ，这样你可以更好地看到我想要的结果:

https://jsfiddle.net/Katrina_B/8L5hzsxp/

(请在宽屏浏览器中查看 fiddle 。)

提前感谢您提供实现此目的的任何提示。

Answer 1

让 flex 使用垂直居中有时会有点痛苦。

为了对齐元素，父元素需要 flex 。所以解决方案是将 d-flex 添加到您的列以确保它正确显示，然后将 align-self-center 添加到子 ul 元素。

---

使用 Bootstrap 类的解决方案

<div id="music" class="col-md-3 d-flex">
  <ul class="list-unstyled m-0 align-self-center">
    <li>Plena</li>
    <li>Danza</li>
    <li>Bomba</li>
  </ul>
</div>

- 请注意，我删除了 list-inline，因为它与 list-unstyled

是多余的