0

我已经对此进行了大量研究，但找不到任何关于如何解决此问题的答案。让我们开始吧。

我有 2 个菜单和一个图像（您可以在 jFiddle 中看到格式）。我想使菜单居中。现在是的，我知道这通常很简单，但我尝试了一系列正常的补救措施，包括边距、位置和填充。请给我一些帮助。您可以使用下面的链接来玩弄 jFiddle。谢谢。

http://jsfiddle.net/7mXPy/1

重要的 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>
4

1 回答 1

1

没有float: center;。使用这样的东西：

#nav ul li, #nav3 li {display: inline-block;}
#nav ul {text-align: center;}

小提琴：http: //jsfiddle.net/praveenscience/7mXPy/6/

于 2013-06-11T02:17:31.417 回答