vertical-align无效解决方法

最新推荐文章于 2024-03-11 20:25:07 发布

原创最新推荐文章于 2024-03-11 20:25:07 发布 · 3.1k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

本文介绍了一种使用CSS实现文本垂直居中的方法。通过设置特定的HTML结构与CSS样式，可以使文本在容器中实现完美的垂直居中效果。关键在于利用行内元素配合vertical-align属性。

首先奉上html结构

   <div class="desc">
       <div class="mid-con">
             <p class="text">Hello Wrold</p>
       </div>
       <i class="mid-i"></i>
   </div>

好好理解vertical-align

要用这个属性实现垂直居中，其实核心就在于这个需要一个满行高的行内元素来作为参考。在设置了vertical-align: middle的元素的同级元素内添加一个行高为父元素满高度的行内元素（如i），则可以实现。
PS：vertical-align是元素自我属性，不是控制子元素的，也不能继承，要使p元素垂直居中，应当写在p元素的样式上。

接下来css

.desc{

white-space:nowrap;

}

.mid-con{
   white-space: normal;
   width: 100%;
   display: inline-block;
   vertical-align: middle;
}
.text{

   vertical-align: middle;

}
.mid-i{
   display: inline-block;
   height: 100%;
   vertical-align: middle;
}