html - 使列表项居中

Question

对于一个项目，我有一个（移动）导航栏，左侧有一个菜单按钮，右侧有一个“返回顶部”按钮。我想在导航栏中有一个标志。我目前正在使用无序列表。

HTML 基本上如下所示：

<div class="navbar">
    <ul>
          <li class="navmenu"><i class="icon-menu"></i></li>
          <li class="mobilelogo"><a href="#top"><img class="moblogopic" src="media/navbarlogo.png" alt="logo"/></a></li>
          <li class="up-icon" title="Back to top"><a href="#top"><i class="icon-up"></i></a></li>
    </ul>
</div>

CSS 看起来像这样：

.navbar{
 width:100%;
 height: 45px;
}
.navbar ul{
 padding: 0 10px;
}
.navmenu{
 display:inline;
 float: left;
}
.mobilelogo{
 display:inline;
 float:left;
 margin: 0 auto;
}
.up-icon{
 display: inline;
 float:right;
}

边距：0 自动；似乎不起作用。我不能使用诸如 margin-left: 50% 之类的东西，因为该网站必须具有响应性，并且调整大小会使事情变得混乱。导航栏当前如下所示：

Answer 1

You will have to set your widths then..:

.navbar{
 width:100%;
 height: 45px;
}
.navbar ul{
 padding: 0 10px;
}
.navmenu{
 display:inline;
 float: left;
 width:20%;
}
.mobilelogo{
 display:inline;
 float:left;
 margin: 0 auto;
 width:60%;
 text-align:center;
}
.up-icon{
 display: inline;
 float:right;
 width:20%;
}