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>