如何在我的 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>

这是我的小提琴，所以你可以更好地看到我想要的结果：

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

（请在宽浏览器中查看小提琴。）

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

Answer 1

在垂直居中的情况下使用 flex 有时会有点痛苦。

为了对齐一个项目，父项目需要被弯曲。因此解决方案是将d-flex 添加到您的列中以确保其正确显示，然后将align-self-center 添加到子ul 元素中。

---

使用引导类的解决方案

<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 是多余的

Answer 2

由于要垂直对齐居中的文本，我在 css 属性中使用了text-align: center。

#mainCont {
  background-color: #9bf49a;
  padding: 0;
  margin: 0;
}

header {
  background-color: #e8b7e2;
}

#logo {
  background-color: #6acaf7;
  padding: 0;
  margin: 0;
}

#logo img {
  width: 100%;
  heght: auto;
}

#animals {
  background-color: #f9efa4;
  text-align: center;
}

#animals ul {
  padding: 0;
  margin: 0;
}

#music {
  background-color: #f776c6;
}

.main-navigation {
  width: 100%!important;
  display: inline-block;
  background-color: #005552;
  text-transform: uppercase;
  font-weight: 300;
}

.main-navigation ul {
  list-style: none;
  padding-left: 0;
  padding: 0!important;
  margin: 0!important;
}

.main-navigation ul ul {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  float: left;
  position: absolute;
  top: 100%;
  left: -999em;
  z-index: 99999;
  color: #005552;
}

.main-navigation ul ul ul {
  left: -999em;
  top: 0;
}

.main-navigation ul ul li:hover>ul,
.main-navigation ul ul li.focus>ul {
  left: 100%;
}

.main-navigation ul ul a {
  width: 250px;
  background-color: #FFF;
  color: #006666;
}

.main-navigation ul ul a:hover {
  background-color: #33CC99;
  color: #FFF;
}

.main-navigation ul li:hover>ul,
.main-navigation ul li.focus>ul {
  left: auto;
}

.main-navigation li {
  float: right;
  position: relative;
  margin: 0!important;
  padding: 0!important;
}

.main-navigation a {
  display: block;
  text-decoration: none;
  padding: 10px 15px;
  color: #fff;
  background-color: #005552;
}

.main-navigation a:hover {
  text-decoration: none;
  color: #33CC99;
}

#jumbo {
  background-image: url(http://funnyneel.com/image/files/i/01-2014/beautiful-trees-branched-out.jpg);
  background-size: cover;
  background-repeat: none;
  background-position: center;
  border: 3px solid #f7892e;
}

#jumboNote {
  font-style: italic;
  background-color: #000;
  opacity: 0.7;
  padding: 20px;
  height: 100%;
}

#jumboNote h3 {
  font-size: 17px;
  color: #FFF;
  text-align: center;
}

<div id="headerContainer" class="container-fluid">

  <header class="row row-eq-height">

    <div id="logo" class="col-md-3">
      <img src="https://i.pinimg.com/originals/8b/58/61/8b5861d8fa21ae898d776631a587acb8.jpg">
    </div>
    <!--logo-->

    <div id="animals" class="align-self-center col-md-6">
      <ul class="list-unstyled list-inline">
        <li class="list-inline-item">Giraffes</li>
        <li class="list-inline-item">Elephants</li>
        <li class="list-inline-item">Donkeys</li>
      </ul>
    </div>

    <div id="music" class="col-md-3">
      <ul class="list-unstyled list-inline">
        <li>Plena</li>
        <li>Danza</li>
        <li>Bomba</li>
      </ul>
    </div>
    <!--social-->

  </header>
  <!--header-->

  <div class="row">

    <nav id="fruits" class="main-navigation">
      <ul>

        <li><a href="#">Oranges</a></li>
        <li><a href="#">Lemons</a></li>
        <li><a href="#">Papaya</a></li>
        <li><a href="#">Snowstorms & Weather</a>
          <ul>
            <li><a href="#">Ice cold</a></li>
            <li><a href="#">Cold winds</a></li>
            <li><a href="#">Freezing temperatures</a></li>
          </ul>
        </li>
        <li><a href="#">Raspberry</a></li>
        <li><a href="#">Apples & Pears</a>
          <ul>
            <li><a href="#">Green</a></li>
            <li><a href="#">Red</a></li>
            <li><a href="#">Delicious</a></li>
          </ul>
        </li>
      </ul>
    </nav>

  </div>

</div>
<!--headerContainer-->


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