HTML li如何垂直居中

最新推荐文章于 2024-12-03 09:57:35 发布

原创最新推荐文章于 2024-12-03 09:57:35 发布 · 1.9w 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #标签

Web 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种简单的方法来实现li标签内的内容垂直居中显示。通过设置固定的height并利用vertical-align:middle属性，可以轻松达到目的。适用于网页布局需要调整列表项内文字位置的情况。

在li标签中加上固定的height：40px（根据自己情况设定），再使用vertical-align属性，属性值为middle，搞定！
相关代码如下：

<ul class="mui-table-view" style="margin-top: 10px;">
    <li class="mui-table-view-cell" style="height:40px;vertical-align:middle;">
        <a id="unfinishedOrder" class="mui-navigate-right">
            li标签垂直居中，哈哈
        </a>
    </li>
</ul>