etiquetas - css meaning

¿Qué es exactamente lo que se necesita para que funcione "margin: 0 auto;"?

Question

Sé que ajuste el margin: 0 auto; en un elemento se usa para centrarlo (izquierda-derecha). Sin embargo, sé que el elemento y su elemento principal deben cumplir con ciertos criterios para que el margen automático funcione, y parece que nunca puedo obtener la magia correcta.

Entonces mi pregunta es simple: qué propiedades de CSS deben establecerse en un elemento y su elemento principal para el margin: 0 auto; al centro izquierda-derecha el niño?

Answer 1

Aquí está mi sugerencia:

First: 
      1. Add display: block or table
      2. Add position: relative
      3. Add width:(percentage also works fine)
Second: 
      if above trick not works then you have to add float:none;

Answer 2

En la parte superior de la cabeza de mi gato, asegúrate de que el div que intentas centrar no esté configurado en width: 100% .

Si lo es, entonces las reglas establecidas en los divs para niños son lo que importará.

Answer 3

Fuera de mi cabeza, necesita un width . Debe especificar el ancho del contenedor que está centrando (no el ancho principal).

Answer 4

Fuera de mi cabeza, si el elemento no es un elemento de bloque, hazlo.

y luego darle un ancho

Answer 5

Hice un ejemplo para que puedas ver lo que está pasando, por lo que recuerdo, esto es todo lo que necesitas :)

Answer 6

La parte superior de mi cabeza:

1. El elemento debe ser de nivel de bloque, por ejemplo, display: block o display: table
2. El elemento no debe flotar
3. El elemento no debe tener una posición fija o absoluta ¹

Fuera de la cabeza de otras personas:

4. El elemento debe tener un width que no sea auto ²

Tenga en cuenta que todas estas condiciones deben ser verdaderas para que el elemento esté centrado para que funcione.

¹ _{Hay una excepción a esto: si su elemento fijo o absolutamente posicionado ha left: 0; right: 0 left: 0; right: 0 , se centrará con márgenes automáticos .}

² _{Técnicamente, margin: 0 auto funciona con un ancho automático, pero el ancho automático tiene prioridad sobre los márgenes automáticos, y los márgenes automáticos se ponen a cero como resultado, haciendo que parezca que "no funcionan".}

Answer 7

Quizás sea interesante que no tenga que especificar el ancho para un elemento <button> para que funcione, solo asegúrese de que tenga display:block : http://jsfiddle.net/muhuyttr/

Answer 8

Regla completa:

1. ( display: block Y width no automático) O display: table
2. float: none
3. position: relative

Answer 9

También funcionará con display: table, una propiedad de visualización útil en este caso porque no requiere que se establezca un ancho. (Sé que esta publicación tiene 5 años, pero sigue siendo relevante para los transeúntes;)

Answer 10

Ve a este ejemplo rápido que he creado jsFiddle . Hopefull es fácil de entender. Puede usar un div de wrapper con el ancho del sitio para alinearlo en el centro. La razón por la que debe ponerle width es para que el navegador sepa que no está buscando un diseño líquido.