Question

我有一个带有段落的容器div和另一个包含图像的div。段落和div都是内联的。我无法弄清楚如何垂直居中这一段。我尝试使用vertical-align: middle，但没有做太多。

Answer 1

忘记利润。这只会横向运作。将#hishis-container的顶部和底部填充设置为彼此相等。尝试10％的顶部和底部填充。忘记垂直对齐。

Answer 2

你需要为容器设置一个高度（正如我在评论中告诉你的那样）这里有一种方法（以及其他方法），无论容器高度如何，都要以柔性属性垂直居中。

＆＃13;

.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;
  }

＆＃13;

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

＆＃13;

不能在div中垂直居中一个段落

2 个答案: