如何居中使用UL、LI实现的网页导航栏？CSS设置后居中效果异常求助

问题根源 #

你把text-align: center属性写在了ul的样式规则中，这个属性仅作用于ul内部的文本内容，无法让ul本身在父容器中居中。你给ul设置了display: inline-block，这类行内块级元素要实现整体居中，需要给它的直接父元素添加text-align: center属性。

最小改动修复方案 #

不需要修改你现有的ul、li样式，只要在外层套一个容器，给容器加居中属性即可：

1. HTML部分新增包裹容器：

<div class="nav-container">
    <ul class="nav">
        <li><a href="{% url 'index' %}">Home</a></li>
        <li><a class="active" href="{% url 'aboutus' %}">About us!</a></li>
        <li><a href="{% url 'orderentry' %}">Order here!</a></li>
        <li><a href="{% url 'shipmenttracking' %}">Track your shipment</a></li>
        <li><a href="{% url 'ticketmanage' %}">Having trouble? Click here to get help!</a></li>
    </ul>
</div>

2. 新增容器样式：

.nav-container {
    text-align: center;
}

更简洁的Flex布局优化方案 #

如果不考虑极低版本浏览器兼容，用Flex布局实现导航居中更简单，不需要额外加外层容器，也不用写float属性：

ul {
    list-style-type: none;
    /* 替换原来的inline-block为flex，加justify-content居中 */
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: rgb(111, 145, 156);
}

li {
    /* 删除原来的float: left和display: inline */
    border-right:1px solid rgb(79, 100, 107);
}

其余a标签、hover、active的样式保持你原有的写法不变即可。

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