Html 将列表项居中

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

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>

.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自动；似乎不起作用。我不能使用像“剩余利润：50%”这样的东西，因为网站必须有响应能力，而且调整大小会把事情搞砸。导航栏当前看起来如下所示：

---

您必须设置宽度，然后..：

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

---

您必须设置宽度，然后..：

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

---

这确实奏效了。我明白了！但是为.up图标设置一个最小宽度也很重要，因为如果屏幕宽度太小，它会被挤出屏幕。但是非常感谢！屏幕不应低于

320px

。你可以添加到你的图标中：

最大宽度：100%

，如果它们没有足够的空间，它们会缩小-这对响应式设计中的图像非常有用。这实际上很有效。我明白了！但是为.up图标设置一个最小宽度也很重要，因为如果屏幕宽度太小，它会被挤出屏幕。但是非常感谢！屏幕不应低于

320px

。您可以添加到图标中：

最大宽度：100%

如果它们没有足够的空间，它们会缩小-对于响应性设计中的图像非常有用