居中列表项

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

您必须设置宽度..：

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