Question

我有一个菜单，它运作良好但是需求已经成为菜单选项的中心。我一直试图在这里遵循其他答案，但没有运气。

你可以在这里看到代码 http://codepen.io/anon/pen/avMwYO?editors=110

html是

<nav id='menu'>
    <ul>
      <li class='#'>
        <a href='/'>
          Home
        </a>
      </li>
       <li>
        <a href='#'>
         optionOne
        </a>
      </li>
      <li>
        <a href='#'>
          OptionTwo
        </a>
      </li>
    </ul>
  </nav>

css是

#menu{
background: #f2f2f2;
border-top:2px solid #eaeaea;
border-bottom:2px solid #eaeaea;
color: #444;
height: 50px;
z-index:9;
width:1080px;
margin:0 auto;
}
#menu ul,#menu li{
margin:0 auto;
padding:0 0;
list-style:none
}
#menu ul{
height:80px;
width:1080px
}
#menu li
{
float:left;display:inline;position:relative;font:bold 12px "Arial", sans- serif; text-transform:none;}
#menu a{display: block;
line-height: 50px;
padding: 0 30px;
text-decoration: none;
color: #444;
border-right:1px solid #ddd;

}

 li.home a{background:none;}

如果有人能解释我是如何实现这一点的，我将不胜感激

由于

Answer 1

从li移除花车，将它们inline-block并添加text-align:center给父ul。

#menu ul {
  height: 80px;
  width: 1080px;
  text-align: center;
}

#menu li {
  display: inline-block;
  position: relative;
  font: bold 12px "Arial", sans-serif;
  text-transform: none;
}

Codepen Demo

Answer 2

你走了：

#menu{
background: #f2f2f2;
border-top:2px solid #eaeaea;
border-bottom:2px solid #eaeaea;
color: #444;
height: 50px;
z-index:9;
width:1080px;
text-align:center;
}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:80px;}
#menu li
{
display:inline-block;font:bold 12px "Arial", sans-serif; text-transform:none;}
#menu a{display: block;
line-height: 50px;
padding: 0 30px;
text-decoration: none;
color: #444;
border-right:1px solid #ddd;

}

li.home a{background:none;}

将CSS更改为此。演示：http://codepen.io/anon/pen/bVZrGO?editors=110

居中导航菜单

2 个答案: