HTML li如何垂直居中

最新推荐文章于 2024-04-28 14:33:56 发布

Janine_Z

最新推荐文章于 2024-04-28 14:33:56 发布

阅读量1.9w

点赞数

CC 4.0 BY-SA版权

分类专栏： Web 文章标签： html 标签

本文链接：https://blog.youkuaiyun.com/Janine_Z/article/details/57081348

Web 专栏收录该内容

4 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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