为什么我不能以margin:0 auto
为中心?
这是我的CSS和HTML代码:
/*Our Reset*/
/*Our Menu*/
#navMenu {
list-style: none;
font-family: Georgia;
font-style: italic;
font-size: 16px;
width: 100%;
float: left;
position: fixed;
visibility: visible;
background-color: #161D39;
opacity: 0.9;
filter: alpha(opacity=90);
z-index: 999;
margin-top: -17px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
}
#navMenu > li {
float: left;
position: relative;
display: block;
transition: .3s;
-moz-transition: .3s;
-webkit-transition: .3s;
}
#navMenu > li:hover {
background-color: #161D39;
}
#navMenu > li > a {
color: #fff;
margin: 0 auto;
float: left;
text-decoration: none;
padding: 18px 25px;
letter-spacing: .1em;
}
/*Our DropDown Menu*/
#navMenu ul {
position: absolute;
/**/
z-index: -1;
/**/
top: -999px;
/**/
list-style: none;
padding: 0;
margin: 0 auto;
text-align: center;
background: #161D39;
transition: .3s;
/**/
-moz-transition: .3s;
/**/
-webkit-transition: .3s;
/**/
}
#navMenu ul li a {
color: #fff;
text-decoration: none;
display: block;
padding: 6px 10px;
font-size: 14px;
line-height: 2em;
}
#navMenu ul li:hover {
background-color: #161D39;
}
#navMenu li:hover ul {
display: block;
/**/
top: 55px;
min-width: 200px;
}
<ul id="navMenu">
<li><a href="/">Inicio</a>
</li>
<li><a href="/nosotros/">Acerca de</a>
<ul>
<li><a href="/helpers/">Helpers</a>
</ul>
</li>
<li><a href="#">Información</a>
<ul>
<li><a href="reglas-del-juego/">Reglas del juego</a>
</li>
<li><a href="staff-del-juego/">Staff del juego</a>
</li>
<li><a href="sanciones/">Sanciones</a>
</li>
<li><a href="brigada-anti-hack/">Brigada Anti Hack</a>
</li>
<li><a href="http://eshelpers.com/standalones/">Standalones</a>
</li>
</ul>
</li>
<li><a href="preguntas-frecuentes/">FAQ</a>
<ul>
</ul>
</li>
<li><a href="contacto">Contactanos</a>
</li>
</ul>
答案 0 :(得分:2)
你不能混合位置:绝对;和保证金:0自动;如果你想让事情集中在同一个元素上。您需要添加另一个相对定位的子div来容纳您的居中元素或删除绝对定位。这个问题就是一个很好的例子:
need help CSS centering with absolute positioning
进一步详细说明为什么他们不会混合: http://www.sitepoint.com/css-center-position-absolute-div/
答案 1 :(得分:0)
使用margin-left:auto; margin-right:auto;
和position:relative;