html - 我如何居中底部导航

Question

我需要在移动设备中将底部导航菜单居中。我已经提供了它当前的样子的图像。有人可以帮助我将代码放到需要的地方吗？

<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;
    }
}

Answer 1

您可以轻松地将 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>