如何使底部导航居中

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

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

＆＃13;

＆＃13;

ul

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;