我对此进行了大量研究，但找不到任何有关如何解决此问题的答案。让我们开始吧。
我有 2 个菜单和一个图像（你可以在 jFiddle 中看到格式）。我想将菜单居中。现在，是的，我知道这通常很简单，但我尝试了一系列正常的补救措施，包括边距、位置和填充。请给我一些帮助。您可以使用下面的链接来使用 jFiddle。谢谢。
重要的CSS
#nav3 {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
text-align: center;
vertical-align: text-top;
}
#nav3 ul {
list-style: none;
width: 100%;
margin: 0 auto;
padding: 0;
}
#nav3 li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-left: 1px solid #ccc;
vertical-align: super;
margin: 10%;
}
重要的 HTML
<body>
<div id="nav3">
<ul>
<li><a href="#" style="float: left;">Home</a></li>
<?php
if($_SESSION){
?> <li><a href="#" style="float: left; border-right: 1px solid #ccc;">Logout</a></li> <?
}else{
?> <li><a href="#" style="float: left;">Login</a></li>
<li><a href="#" style="float: left; border-right: 1px solid #ccc;">Signup</a></li>
<?
}
?>
</ul>
</div>
<img style="margin-left: 650; z-index: 9;" src="includes/logo/diagram_v2_22.png">
<div id="nav">
<ul>
<li><a href="#" style="float: left">XBOX360</a></li>
<li><a href="#" style="float: left">XBOX1</a></li>
<li><a href="#" style="float: left">PS3</a></li>
<li><a href="#" style="float: left; border-right: 1px solid #ccc;">PS4</a></li>
</ul>
</div>
</body>
没有
float: center;#nav ul li, #nav3 li {display: inline-block;}
#nav ul {text-align: center;}
例如，我还会在按钮的内部区域添加一些填充
padding:10px;
因为对齐当然可以工作，但它需要按钮区域内的空间，您可以创建添加填充、边距