[CSS/DIV] Resuelve perfectamente el centrado horizontal de páginas CSS

Un método CSS común para centrar elementos horizontalmente

Centrar elementos con CSS no es algo trivial: los mismos ajustes legítimos de centrado CSS se comportan de forma diferente en distintos navegadores. Empecemos por ver algunas formas comunes de centrar los elementos horizontalmente en CSS.

1. Centrado con márgenes automáticos

La forma preferida de centrar los elementos horizontalmente en CSS es usar la propiedad de margen: simplemente pon las propiedades margen izquierdo y margen derecho en auto. En la práctica, podemos crear un div contenedor para estos elementos que necesitan centrarse. Una cosa a tener en cuenta es que debe especificarse el ancho del contenedor:

div#container{ margin-left:auto; margen-derecha:auto; ancho:168px; }

Este enfoque funciona muy bien en la mayoría de los navegadores principales, incluso IE6 en Windows puede mostrar correctamente en su modo estándar de cumplimiento. Desafortunadamente, en versiones inferiores de IE, este ajuste no logra un efecto de centrado. Así que si quieres usar este método en un proyecto real, asegúrate de que la versión del navegador IE del usuario no sea inferior a 6.0.

A pesar de la falta de soporte, la mayoría de los diseñadores recomiendan usar este enfoque tanto como sea posible. Este método también se considera el más correcto y razonable de todos los métodos para implementar el centrado a nivel de elemento con CSS.

2. Utiliza text-align para lograr el centrado

Otra forma de lograr el centrado de elementos es usar la propiedad text-align, establecer el valor de la propiedad para centrar y aplicarlo al elemento del cuerpo. Es un hack de principio a fin, pero es compatible con la mayoría de los navegadores, así que en algunos casos es esencial de forma natural.

Se llama hack porque este método no aplica propiedades de texto al texto, sino al elemento que es el contenedor. Esto también nos da trabajo extra. Después de crear los divs necesarios para el diseño, necesitamos aplicar la propiedad text-align al cuerpo según el siguiente código:

body{ text-align:center; }

¿Habrá algún problema después de eso? Todos los descendientes del cuerpo están centrados.

Por lo tanto, necesitamos escribir otra regla para devolver el texto a la alineación predeterminada de la izquierda:

p{ text-align:left; }

Es concebible que esta norma adicional cause ciertas molestias. Además, un navegador que realmente sigue el estándar no cambia la posición del contenedor, sino que solo centra el texto en él.

3. Utilizar una combinación de márgenes automáticos y alineación de texto

Debido a que el método de centrado de alineación de texto tiene buena compatibilidad hacia atrás, y el método de relleno automático también es compatible con la mayoría de los navegadores contemporáneos, muchos diseñadores utilizan una combinación de ambos para maximizar el soporte entre navegadores para el efecto de centrado:

body{ text-align:center; } #container{ margin-left:auto; margen-derecha:auto; borde:1pxsolidred; ancho:168px; text-align:left }

Pero esto siempre es un truco, y no es perfecto en absoluto. Todavía tenemos que escribir reglas adicionales para el texto en el contenedor centrado, pero al menos se ve bien en varios navegadores.

4. Solución de margen exterior negativo

Las soluciones con márgenes negativos están lejos de ser tan simples como añadir márgenes negativos a los elementos. Este método requiere el uso tanto de técnicas de posicionamiento absoluto como de márgenes negativos.

A continuación se muestra el método específico de implementación de este esquema. Primero, crea un contenedor con elementos centrados y colócalo absolutamente al 50% del borde izquierdo de la página. De este modo, el margen izquierdo del contenedor comenzará en el 50% del ancho de la página.

Luego, fija el valor del margen izquierdo del contenedor a la mitad del ancho negativo del contenedor. Esto fijará el contenedor en el punto medio de la dirección horizontal de la página.

#container{ background:#ffcurl(mid.jpg)repeat-ycenter; posición: absoluta; izquierda:50%; ancho: 760px; margen-izquierda:-380px; }

¡Mira, nada de trucos! Aunque esta no es la solución preferida, es una buena forma de hacerlo y es muy versátil; sorprendentemente, ni siquiera funciona en NetscapeNavigator 4.x sin problemas, ¿verdad? Así que si quieres la mayor variedad de soporte para navegadores, este método será la mejor opción.