Centrar un elemento con CSS no es una cuestión sencilla: la misma configuración de centrado de CSS válida se comporta de manera diferente en diferentes navegadores. Primero echemos un vistazo a varios métodos comunes en CSS para centrar elementos horizontalmente.
1. Utilice márgenes automáticos para lograr el centrado. La forma preferida de centrar un elemento horizontalmente en CSS es utilizar el atributo de margen; simplemente establezca los atributos de margen izquierdo y derecho del elemento en automático. En el uso real, podemos crear un div que actúe como contenedor para estos elementos que necesitan estar centrados. Una cosa a tener en cuenta en particular es que se debe especificar el ancho del contenedor:
div#container {
margin-left: auto;
margin-right: auto;
width: 168px
}
Este método funciona muy bien en la mayoría de los navegadores principales, incluso IE6 en la plataforma Windows, en su modo de compatibilidad de estándares (modo de cumplimiento) también puede ser mostrado normalmente. Pero desafortunadamente, en versiones inferiores de IE, esta configuración no logra el efecto de centrado. Por lo tanto, si desea utilizar este método en proyectos reales, debe asegurarse de que la versión del navegador IE del usuario no sea inferior a 6.0.
Aunque el soporte no es ideal, la mayoría de los diseñadores recomiendan utilizar este enfoque siempre que sea posible. Este método también se considera el más correcto y razonable entre varios métodos para lograr el centrado horizontal de elementos utilizando CSS.
2. Utilice la alineación de texto para lograr el centrado. Otra forma de lograr el centrado de elementos es utilizar el atributo de alineación de texto para centrar y aplicarlo al elemento del cuerpo. Este enfoque es un truco completo, pero es compatible con la mayoría de los navegadores, por lo que, naturalmente, es necesario en algunos casos.
La razón por la que se le llama hack es que este método no aplica el atributo de texto al texto, sino al elemento que es el contenedor. Esto también nos genera trabajo extra. Después de crear los divs necesarios para el diseño, debemos aplicar el atributo text-align al cuerpo de acuerdo con el siguiente código:
body{
text-align:center
}
¿Habrá algún problema después de eso? Todos los elementos descendientes del cuerpo se mostrarán centrados.
Por lo tanto, necesitamos escribir otra regla para devolver el texto a la alineación izquierda predeterminada:
p {
alineación de texto: izquierda;
}
Puedes imaginar que esta regla adicional causará algunos inconvenientes. Además, los navegadores que realmente cumplan plenamente con los estándares no cambiarán la posición del contenedor, sino que solo centrarán el texto dentro de él.
3. Utilice márgenes automáticos y alineación de texto en combinación Debido a que el método de alineación y centrado de texto tiene buena compatibilidad con versiones anteriores y el método de margen 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 crear efectos de centrado. obtenga la máxima compatibilidad con todos los navegadores:
cuerpo {
alineación de texto: centro;
}
#contenedor {
margen izquierdo: automático;
margen derecho: automático;
borde: 1px rojo sólido;
ancho: 168px;
alineación de texto: izquierda
}
Pero esto sigue siendo un truco y no es perfecto de ninguna manera. Todavía necesitamos escribir reglas adicionales para centrar el texto en el contenedor, pero al menos se ve bien en todos los navegadores.
4. Solución de margen negativo La solución de margen negativo es mucho más que simplemente agregar márgenes negativos a los elementos. Este método requiere el uso tanto de posicionamiento absoluto como de márgenes negativos.
El siguiente es el método de implementación específico de esta solución. Primero, cree un contenedor que contenga el elemento centrado, luego colóquelo absolutamente al 50% del borde izquierdo de la página. De esta manera, el margen izquierdo del contenedor comenzará en el 50% del ancho de la página.
Luego, establezca el valor del margen izquierdo del contenedor en la mitad negativa del ancho del contenedor. Esto anclará el contenedor en el punto medio horizontal de la página.
#contenedor {
fondo: #ffc url(mid.jpg) centro de repetición;
posición: absoluta;
izquierda: 50%;
ancho: 760 px;
margen izquierdo: -380px;
}
¡Mira, no hay ningún truco! Si bien esta no es la solución preferida, es un buen enfoque y funciona extremadamente bien; incluso funciona en Netscape Navigator 4.x sin ningún problema, lo cual es sorprendente, ¿no? Entonces, si desea la más amplia compatibilidad con el navegador, este método será la mejor opción.