如何在div内垂直居中列表？top-menu列表居中问题求助

阿华AIGC实验室

2026-5-22

我希望将列表在top-menu div内垂直居中，但不清楚问题出在哪里。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Joshua Brown</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .top-menu {
            width: 100%;
            height: 80px;
            background-color: #3f3535;
        }
        p {
            font-size: 42px;
            font-weight: lighter;
            font-family: sans-serif;
            color: #2991d9;
            padding-left: 100px;
            padding-top: 10px;
        }
        li {
            display: inline-block;
            float: right;
            color: #...
            /* 原样式未完成，核心问题集中在此处 */
        }
    </style>
</head>
<body>
    <div class="top-menu">
        <ul>
            <li>菜单选项1</li>
            <li>菜单选项2</li>
            <li>菜单选项3</li>
        </ul>
        <p>Joshua Brown</p>
    </div>
</body>
</html>

问题根源在哪？

你给li加的float: right是罪魁祸首——这个属性会让列表项脱离正常文档流，导致父容器.top-menu的任何垂直居中设置都对它失效。而且你同时用了display: inline-block和float，后者会直接覆盖前者的特性，等于白白写了inline-block。另外，用padding-top硬调p标签位置的方式也不够灵活，容易出现适配问题。

推荐解决方案：用Flexbox实现（现代布局首选）

Flexbox是目前实现垂直/水平居中最便捷、兼容性最好的方式，只需要修改.top-menu的CSS，再调整列表样式即可：

.top-menu {
    width: 100%;
    height: 80px;
    background-color: #3f3535;
    /* 开启Flex布局 */
    display: flex;
    /* 垂直方向居中对齐 */
    align-items: center;
    /* 水平方向：标题靠左，菜单靠右 */
    justify-content: space-between;
    /* 给容器加左右内边距，避免内容贴边 */
    padding: 0 20px;
    box-sizing: border-box; /* 确保内边距不会撑宽容器 */
}

/* 去掉p标签的硬编码padding，交给Flex控制位置 */
p {
    font-size: 42px;
    font-weight: lighter;
    font-family: sans-serif;
    color: #2991d9;
}

ul {
    /* 去掉列表默认的圆点样式 */
    list-style: none;
}

li {
    /* 删掉float: right，用Flex控制位置 */
    display: inline-block;
    color: #fff; /* 补全你未写完的文字颜色，这里用白色做示例 */
    margin-left: 20px; /* 给菜单选项之间加间距 */
}

修改后不管菜单文字是单行还是多行，都能完美垂直居中，而且水平布局也更灵活——标题和菜单会自动分布在容器两端。

备选方案：用line-height（仅适用于单行文本）

如果你的菜单都是单行文字，也可以用这个更简单的方法：

.top-menu {
    width: 100%;
    height: 80px;
    background-color: #3f3535;
    line-height: 80px; /* 行高等于容器高度，单行文本自动垂直居中 */
    padding: 0 20px;
    box-sizing: border-box;
}

p {
    font-size: 42px;
    font-weight: lighter;
    font-family: sans-serif;
    color: #2991d9;
    display: inline-block; /* 让p和ul在同一行显示 */
    line-height: normal; /* 重置行高，避免文字被过度撑开 */
    vertical-align: middle; /* 和行高配合实现居中 */
}

ul {
    list-style: none;
    float: right;
}

li {
    display: inline-block;
    color: #fff;
    margin-left: 20px;
}

不过这个方法只适合单行内容，一旦菜单文字换行就会失效，所以还是优先推荐Flexbox方案~

内容的提问来源于stack exchange，提问作者Omar VR