ul、li中的DIV垂直居中

最新推荐文章于 2023-11-14 10:57:12 发布

weixin_30794851

最新推荐文章于 2023-11-14 10:57:12 发布

阅读量2k

点赞数 1

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jeremy5810/p/8288930.html

当li高度可动态改变时，li中的DIV始终保持垂直居中。

由于高度不固定，不能用margin或者padding解决。

最头疼的是vertical-align: middle;也莫名其妙的失效了。

最终想到了相对定位这个办法,简单代码如下：

<li class="aaa">
    <div class="bbb">
        <p>DIV里面的内容</p>
    </div>
</li>


.aaa{
  height:100%;
  position: relative;
}

.bbb{
  position: absolute;
  top: 50%;
  margin-top: -22px;
}

代码解释：

top: 50%; 作用是利用相对定位实现垂直居中。但是设置之后，元素会稍有偏差。

margin-top: -22px;作用把偏差调整回来，（-22px只是举例子，实际大小按照样式设定）。

到这里可能有人会问，为什么不直接在top中调整，而需要另外添加margin-top来调整呢，因为如果top不是50%的话，比如30%，那么随着li的高度变化，DIV实际在li里面的高度就会越接近真正的30%位置。利用margin-top来调整不会出现该现象。如果有什么描述的不对，欢迎评论指出，本人还是程序员小白~

转载于:https://www.cnblogs.com/jeremy5810/p/8288930.html