如何将无序列表内的a href链接居中显示在导航栏，text-align:center无效怎么办

问题原因 #

你设置的text-align: center不生效，核心是<li>元素设置了float: left，浮动元素会脱离正常文档流，父元素ul的文本对齐属性无法作用在浮动元素上。

解决方案（推荐Flex布局，兼容性好且易维护） #

只需要修改ul和li的两处CSS即可：

1. 给ul添加弹性布局属性，实现子元素水平居中
2. 删除li的float: left属性

修改后的完整代码如下：

/* Navigation bar design */
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color:#333;
    /* 新增以下两行 */
    display: flex;
    justify-content: center;
  }
  
  li {
    /* 删除原来的float: left */
    color: white;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 15px;
    font-weight: bold;
    
}
  
  li a {
    display: inline-block;
    color: white;
    padding: 14px 16px;
    text-decoration: none;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 3px;
  }
  
li a:hover {
    background-color: #b0b0b0;

}

原有HTML代码无需修改即可生效。

如果你不想用Flex布局，也可以用inline-block方案：

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color:#333;
    text-align: center; /* 新增这行 */
  }
li {
    /* 把float:left替换成下面这行 */
    display: inline-block;
    /* 其余原有属性保留 */
}

两种方案都能实现导航链接水平居中的效果。

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