无法在 div 中垂直居中段落

Question

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

Answer 1

忘记边距。那只会水平工作。将 #historic-container 的顶部和底部填充设置为彼此相等。尝试 10% 的顶部和底部填充。也忘记垂直对齐。

Answer 2

您需要为您的容器设置高度（正如我在评论中告诉您的那样）。
这里有一个方法（除其他外）使用 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>

无法在 div 中垂直居中段落

Can't vertically center a paragraph inside a div

html

css

positioning

css-position