html - 如何居中导航底部

我需要将底部导航菜单置于移动设备的中心。我提供了它当前的外观图像。有人可以帮助我将代码发布到需要的地方吗？

<ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">Current Projects</a></li>
     <li><a href="#">What We Do</a></li>
     <li><a href="#">Call</a></li>
</ul>

@media (max-width: 767px){
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #219ae2;
        position: fixed;
        bottom: 0;
        width: 100%;
        text-size: 10px !important;
    }

    li {
        float: left;
    }

    li a {
        display: block;
        color: white;
        text-align: center;
        padding: 8px 10px;
        text-decoration: none;
    }

    li a:hover:not(.active) {
        background-color: #111;
    }

    .active {
        background-color: #4CAF50;
    }
}

最佳答案

您可以轻松地将li {float: left;}替换为li {display: inline-block}，然后通过在li中添加text-align: center来将ul居中，并检查以下代码段：

@media (max-width: 767px){
ul {
    text-align: center;
    list-style-type: none;
     margin: 0;
     padding: 0;
     overflow: hidden;
     background-color: #219ae2;
     position: fixed;
     bottom: 0;
     width: 100%;
     text-size: 10px !important;
}

li {
  display: inline-block;
}

li a {
   display: block;
   color: white;
   text-align: center;
   padding: 8px 10px;
   text-decoration: none;
}

li a:hover:not(.active) {
 background-color: #111;
}

.active {
 background-color: #4CAF50;
}
}

<ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">Current Projects</a></li>
   <li><a href="#">What We Do</a></li>
   <li><a href="#">Call</a></li>
</ul>

关于html - 如何居中导航底部，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47736812/