Question

我一直在努力将菜单集中在我一直在努力的网页上。我已经尝试了所有流行的显示答案：内联块，居中文本，边距：0自动;然而，所有尝试都失败了。有什么东西我做错了，或者把css规则置于错误的元素之下？

只想要水平中心对齐。我也使用了css重置。

我在最近的失败尝试中加入了一个JS小提琴。谢谢。

<div id="menu">

    <ul> 
       <li>
         <a href="#">Apples</a> 
       </li> 
       <li>
         <a href="#">Oranges</a>
       </li> 
    </ul> 

</div>

#menu{
    width: 100%;
    height: 300px;
}   

#menu ul{
    width: 100%;
    height:100%;
}


#menu li{
    display:block;
    width:150px;
    height:150px;
    border-radius:75px;
    font-size:20px;
    line-height:150px;
    text-align:center;
    background:#000;
    float: left;
}

#menu a{
    display:block;
    margin: 0 auto;
}

Answer 1

JSfiddle Demo

<强> CSS

#menu {
    width: 100%;
    height: 300px;
    text-align: center;
}
#menu ul {
    display: inline-block;
    margin:0;
    padding:0;
}
#menu li {
    width:150px;
    height:150px;
    border-radius:75px;
    font-size:20px;
    line-height:150px;
    background:#000;
    display: inline-block;
}
#menu a {
    display:block;
    margin: 0 auto;
}

注意 - 内联块意味着间距受HTML中的空格影响。在其他SO问题中有各种方法来处理这个问题。答案。

Answer 2

这是一个解决方案，不依赖于您的菜单大小。

请注意<ul>有一个默认的左侧填充需要删除（除非您使用CSS重置）。

＆＃13;

#menu{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
}
#menu ul{
  width: 100%;
  padding: 0;
}
#menu li{
  display:block;
  width:150px;
  height:150px;
  border-radius:75px;
  font-size:20px;
  line-height:150px;
  text-align:center;
  background:#000;
  float: left;
}			
#menu a{
  display:block;
  margin: 0 auto;
}

＆＃13;

<div id="menu">		
  <ul> 
    <li><a href="#">Apples</a> 
    </li> 
    <li><a href="#">Oranges</a>
    </li> 
  </ul> 
</div>

＆＃13;

Answer 3

在#menu li移除float:left;并添加margin:auto;。

为了将两个项目保持在一行中，请在display: inline-block;上使用#menu li，并使用自动宽度和边距将父元素x元素居中。

屏幕上的中心菜单

3 个答案: