html - Cómo centrar las cosas-pantalla: bloque/bloque en línea

block center

Question

Al centrar las cosas en html y css, encuentro dos enfoques, ya sea aplicando el elemento:

display:block;
margin:0 auto;

o utilizando:

display:inline-block;
text-align:center; (on the parent element)

Siempre me pregunto cuál es mejor y por qué. ¡¡Gracias!!

Answer 1

Esta es una pregunta clásica e importante.

Los elementos pueden estar en línea (lo que significa que todos se sientan uno junto al otro, como una etiqueta span) o pueden ser bloques (lo que significa que la pila está una encima de la otra, como una etiqueta div).

Margen: automático, aunque un poco extraño cuando lo ves por primera vez, es la mejor y única forma de centrar un elemento de nivel de bloque (posición estática).

Para cualquier cosa que se muestre: en línea (como una etiqueta span) - la única forma de centrarla es si especifica text-align: center en el padre. Esto centrará todo lo que se muestra: en línea en su interior que es posición: estática;

Pantalla: inline-block es un híbrido de los dos que es relativamente nuevo (pero se admite desde ie7 si utiliza el truco mencionado en otra respuesta). Con inline-block, obtiene los beneficios de inline, ya que puede pegar un montón de cosas una al lado de la otra y hacer que todas estén centradas (piense en una navegación donde todos los elementos de navegación estén centrados), pero TAMBIÉN tienen cada una aproveche algunas de las cosas que obtiene con la pantalla: bloque: el más importante es ALTURA.

Imagine un escenario en el que cada elemento de navegación tenga una imagen de fondo que tenga 80px de altura; no puede hacer que un elemento en línea tenga una altura de 80, por lo que tendría que hacer que cada elemento se muestre: bloque: solo entonces puede darle un altura. Entonces, para hacer que todos aparezcan uno al lado del otro, los harías flotar. El problema es que si los haces flotar, no puedes centrarlos en la página a menos que le des un ancho fijo a la navegación y el margen: auto ESO. Esto significa que la navegación tiene un ancho fijo, podría estar bien, pero hay veces en que la navegación tiene que tener elementos dinámicos, diferentes anchuras para diferentes idiomas, etc.

Introduzca display: inline-block.

Answer 2

Los elementos de bloque siempre deben estar centrados usando

.block {
    margin-left: auto;
    margin-right: auto;
    width: 600px;
}

como lo indica w3c: http://www.w3.org/Style/Examples/007/center.en.html#block

text-align: center;

está bien nombrado: úsalo para centrar los textos.

Actualizar

También puedes usar display: flex now:

.parent {
    display: flex;
    justify-content: center;
}
.block {
    width: 200px;
}

Answer 3

No hay mejor manera en esta situación, ambos enfoques funcionarán y ambos se corregirán. Solo una pantalla: inline-block no funciona en IE7 (si es compatible con este navegador) necesitará un truco para que funcione

display: inline-block;
*display: inline;
zoom: 1;