¿Por qué no puedo centrar con margen: 0 automático?

130

Tengo un #headerdiv que es 100% widthy dentro de ese div tengo una lista desordenada. He aplicado margin: 0 autoa la lista desordenada pero no la centrará dentro del encabezado div.

¿Alguien puede decirme por qué? Pensé que si definía el ancho de la división principal, entonces la lista desordenada debería poder centrarse margin: 0 auto. ¿Qué me estoy perdiendo?

Aquí está mi código: 

<style>

* {
    margin: 0;
    padding: 0;
}

#header {
    width: 100%;    
    background-color: #333;
    min-height: 160px;
    font-family:Arial, Helvetica, sans-serif;
}

#sitename {
    font-size: 50px;
    width: 620px;
    margin:0 auto;
    padding-top: 35px;
    color:#999;
}

#header ul {
    float: right;
    margin: 0 auto;
}

#header ul li {
    float: left;
    padding-right: 20px;
    list-style-type: none;
    font-size: 20px;
}

</style>

</head>

<body>

<div id="header">
    <h1 id="sitename">Photography Auction Site</h1>

    <ul>
        <li>List of Photos</li>
        <li>Image Gallery</li>
        <li>Contact Us</li>
    </ul>
</div>

</body>
</html>
html css margin Zeckdude
fuente
¿Qué navegador estás usando? IE / Win tiene algunos problemas con el margen automático.
JD Frias
¿Por qué también flotas tu ul hacia la derecha? Saque eso, y probablemente también el flotador: se fue para el li, y debería estar bien.
Simon
1
Estoy creando una barra de navegación. Saqué el flotador a la derecha para el ul y puse un flotador a la izquierda para el li, pero eso lo pone todo a la izquierda ahora.
zeckdude

Respuestas:

135

Debe definir el ancho del elemento que está centrando, no el elemento principal.

#header ul {
    margin: 0 auto;
    width: 90%;
}

Editar : Ok, he visto la página de prueba ahora, y así es como creo que la quieres:

#header ul {
    list-style:none;
    margin:0 auto;
    width:90%;
}

/* Remove the float: left; property, it interferes with display: inline and 
 * causes problems. (float: left; makes the element implicitly a block-level
 * element. It is still good to use display: inline on it to overcome a bug
 * in IE6 and below that doubles horizontal margins for floated elements)
 * The styles below is the full style for the list-items. 
 */
#header ul li {
    color:#CCCCCC;
    display:inline;
    font-size:20px;
    padding-right:20px;
}
PatrikAkerstrand
fuente
2
¿Qué pasa si el ancho de la ul será dinámico? Estoy pensando en poner dinámicamente texto diferente en las li's con PHP más tarde, así que estoy tratando de anticipar eso.
zeckdude
2
Sí, entonces no puede centrarse usando el margen: auto;
PatrikAkerstrand
1
Intenté tu última sugerencia, pero no funcionó. He subido la versión más reciente con sus recomendaciones a la misma ubicación para que pueda ver lo que estoy experimentando. El ul está siendo empujado hacia la derecha unos 50 px.
zeckdude
1
Como dije en mi sugerencia, quite el flotador: izquierda
PatrikAkerstrand
1
Eso funcionó genial! ¡Muchas gracias por seguir conmigo y ayudarme! ¡Ese problema me ha estado matando! ¡Gracias de nuevo!
zeckdude
43

Un bloque en línea cubre toda la línea (de izquierda a derecha), por lo que un margen izquierdo y / o derecho no funcionará aquí. Lo que necesita es un bloque, un bloque tiene bordes a la izquierda y a la derecha, por lo que puede verse influenciado por los márgenes.

Así es como funciona para mí:

#content {
display: block;
margin: 0 auto;
}
Hoeks
fuente
Gracias por la sugerencia de gran utilidad, que tenía el mismo problema con un elemento en línea y no podía entender por qué no estaba funcionando
mastazi
Esta es la mejor respuesta, y funciona para ventanas de varios tamaños.
Yuda Prawira
14

Por qué no?

#header {
    text-align: center;
}

#header ul {
    display: inline;
}
kalys.osmonov
fuente
Agregué text-align: left; a #header ul para centrar el ul y mantener el texto en el li alineado a la izquierda. También necesitaba configurar el ul para que se muestre como bloque en línea para que el ancho sea dinámico (automático).
Brent Self
3

No sé por qué la primera respuesta es la mejor, lo probé y no funciona, de hecho, como @ kalys.osmonov dijo, se puede dar text-align:centera header, pero hay que hacer ulcomo inline-blocklugar de inline, y también hay que aviso eso text-alignse puede heredar, lo que no es bueno hasta cierto punto, por lo que la mejor manera (no funciona por debajo de IE 9) es usar marginy transform. Simplemente elimine float righty margin;0 autode ul, como a continuación:

#header ul {
   /* float: right; */
   /* margin: 0 auto; */
   display: inline-block;
   margin-left: 50%; /* From parent width */
   transform: translateX(-50%); /* use self width which can be unknown */
  -ms-transform: translateX(-50%); /* For IE9 */
}

De esta manera se puede solucionar el problema de hacer un ancho dinámico del ulcentro si no le importa IE8, etc.

Bill dou
fuente
0

Podemos establecer el ancho para la etiqueta ul y luego se alineará al centro.

#header ul {
    display: block;
    margin: 0 auto;
    width: 420px;
    max-width: 100%;
}
Vani S
fuente