html - 无法在 div 中垂直居中段落

Question

我有一个包含段落的容器 div 和另一个包含图像的 div。段落和 div 都是内联的。我不知道如何使段落垂直居中。我试过使用 vertical-align: middle 但效果不大。

Answer 1

你需要为你的容器设置一个高度(正如我在评论中告诉你的)。
这里有一个方法(除其他外)使用 flex 属性垂直居中，无论容器高度如何。

.col-md-6 {
    height: 500px;
    // The container must be flexible
    display: flex;
}

.historic-story {
    font-size: 25px;
    text-align: center;
    // This is the property which centers
    align-self: center;
  }

<div id="historic-container" class="col-md-12">
  <div class="col-md-6">
    <p class="historic-story"><i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo in tellus ut varius. Etiam posuere ultricies maximus. Donec non turpis dolor. Donec erat nulla, mollis sit amet consectetur in, tempus vitae urna. Quisque elementum in felis eget pretium. Phasellus ultrices ligula ut consequat efficitur.</i></p>
  </div>
  <div class="col-md-6 historic-img-container">
    <img src="//cdn.shopify.com/s/files/1/1698/6183/t/5/assets/historic1.jpg?11742577354521181346" alt="">
  </div>
</div>