CSS UL/LI菜单不居中

我的CSS UL菜单似乎不想居中，有什么想法？我粘贴了以下代码以供审阅，我对CSS非常陌生，因此非常感谢您的帮助:-)CSS UL/LI菜单不居中

我能够居中的唯一方法是修复宽度并使用html中心标记但我需要100％的扩展菜单，我需要自动居中。

的CSS

#menu{ 
    width:100%; 
    margin: 0; 
    padding: 5px 0 0 0; 
    list-style: none; 
    background-color:#333333; 
    text-align:center; 
} 

#menu li{ 
    float: left; 
    padding: 0 0 5px 0; 
    position: relative; 
    list-style:none; 
    margin:auto; 
} 

#menu ul{ 
     list-style:none; 
     display:inline; 
     margin: 0; 
     padding: 0; 
     text-align: center; 
} 

#menu a{ 
    float: left; 
    height: 15px; 
    padding: 0 25px; 
    color:#FFF; 
    text-transform: uppercase; 
    font: 10px/25px Arial, Helvetica; 
    text-decoration: none; 
    text-shadow: 0 0px 0 #000; 
} 


#menu li:hover > a{ 
    color:#F90; 

    font: bold 10px/25px Arial, Helvetica; 
} 

*html #menu li a:hover{ /* IE6 */ 
    color: #F06; 
} 

#menu li:hover > ul{ 
    display: block; 
}

再次感谢:-)

来源

2012-10-29 AppleTattooGuy

你想让菜单块位于菜单中心还是链接内？ – Chris

@Chris我想让菜单中的链接居中。 – AppleTattooGuy

提供宽度您menu和使用margin: auto;

#menu{ 
    width:300px; <--------Here 
    margin: 0 auto; <-----Here 
    padding: 5px 0 0 0; 
    list-style: none; 
    background-color:#333333; 
    text-align:center; 
}

而且你为什么要这么做？

#menu li:hover > ul{ 
    display: block; 
}

而且也是这个

#menu a{ 
    float: left; 
    .... 
}

更新：刚刚看了你所有的级联小艾搞砸的样式，请使用以下

#menu { /* I Assume this ID is applied to <ul> element */ 
    width:/*Whatever you want to define*/; 
    margin: 0 auto; <---Change Here 
    padding: 5px 0 0 0; 
    list-style-type: none; <---Change Here 
    background-color:#333333; 
    text-align:center; 
} 

#menu li{ 
    float: left; <---You don't need this 
    padding: 0 0 5px 0; 
    position: relative; <---You don't need this too 
    list-style:none; <---You don't need this too 
    margin:auto; <---You don't need this too 
} 

/* Take out this entirely from here */ 
#menu ul{ 
     list-style:none; 
     display:inline; 
     margin: 0; 
     padding: 0; 
     text-align: center; 
} 
/* till here */ 

#menu a{ 
    float: left; <---You don't need this 
    height: 15px; 
    padding: 0 25px; 
    color:#FFF; 
    text-transform: uppercase; 
    font: 10px/25px Arial, Helvetica; 
    text-decoration: none; 
    text-shadow: 0 0px 0 #000; 
} 


#menu li:hover > a{ 
    color:#F90; 

    font: bold 10px/25px Arial, Helvetica; 
} 

*html #menu li a:hover{ /* IE6 */ 
    color: #F06; 
} 

#menu li:hover > ul{ 
    display: block; 
}

如果你想在菜单里面的链接太简单了使用这个

HTML

<ul id="#menu"> 
    <li></li> 
</ul>

CSS

#menu li { 
    text-align: center; 
}

来源

2012-10-29 19:52:17

非常感谢您的帮助和时间，文本现在居中，但现在显示为垂直列表，任何想法？ – AppleTattooGuy

@JamesLeist你想要水平显示它？ –

是的，它是一个菜单栏，我已经设法通过添加float：left到菜单li部分，但现在它不再居中。 – AppleTattooGuy

在UL把

text-align:center;

意味着在UL该文本的中心。您应该添加：

margin-left:auto; 
margin-right:auto;

到ul。这将适用于所有主流浏览器保存IE浏览器。要在IE中工作，您需要确保包含ul的标签具有

text-align:center;

其中。

来源

2012-10-29 19:54:02 avikar96

CSS UL/LI菜单不居中

回答

相关问题