如何实现NavBar导航栏文本居中？现有实现未生效求解决方案

问题根因 #

• 你给.navBar a设置了float: left，浮动属性会让所有链接默认靠左排列，仅给a标签加text-align: center只能实现a标签内部文本在自身宽度内居中，无法让整组导航链接在导航栏容器内居中
• 现有HTML存在嵌套错误，<nav>标签的闭合顺序早于内部.navBar对应的div标签，会导致样式匹配异常

修正后代码 #

HTML代码 #

<nav>
    <div class="navBar">
        <a class="active" href="Main.html"> Main</a>   
        <a href="Menu.html"> Menu</a>
        <a href="Events.html"> Events</a>    
    </div>
</nav>

CSS代码（Flex布局方案，兼容性好写法简洁） #

.navBar {
    background-color: #333;
    overflow: hidden;
    position: relative;
    /* 新增Flex相关属性实现居中 */
    display: flex;
    justify-content: center;
}

.navBar a {
  /* 删除原有float: left属性 */
  text-align: center;
  color: #f2f2f2;
  padding: 14px 14px;
  text-decoration: none;
  font-size: 16px;
}

低版本浏览器兼容方案 #

如果需要兼容不支持Flex的老旧浏览器，可以用以下写法：

.navBar {
    background-color: #333;
    overflow: hidden;
    position: relative;
    text-align: center;
}

.navBar a {
  /* 删除原有float: left属性，替换为inline-block */
  display: inline-block;
  text-align: center;
  color: #f2f2f2;
  padding: 14px 14px;
  text-decoration: none;
  font-size: 16px;
}

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