Primero veamos el código de mi archivo XHTML/HTML simple (parte). Nuestro propósito es centrar el #contenedor horizontalmente.
<cuerpo>
<div id="contenedor">
<h1>contenido</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius eleifend.</p>
</div>
</body>Usar márgenes adaptables (margen automático)
La forma preferida de centrar cualquier elemento horizontalmente es utilizar la propiedad de margen y establecer los valores izquierdo y derecho en automático. Pero debes especificar un ancho para #container.
div#contenedor {
margen izquierdo: automático;
margen derecho: automático;
ancho: 168px;
}
Esta solución funciona en cualquier navegador moderno, incluso IE6, siempre que esté en modo de cumplimiento de estándares web. Desafortunadamente, no funcionará en versiones anteriores de IE/Win. Hacemos una tabla para esto: Lista de soporte de borde adaptable de navegación Soporte de versión del navegador
Internet Explorer 6.0, modo de cumplimiento Sí
Internet Explorer 6.0, modo peculiaridades No
Internet Explorer 5.5 Windows No
Internet Explorer 5.0 Windows No
Internet Explorer 5.2 Macintosh Sí
Todas las versiones actuales de Mozilla son
Todas las versiones de Mozilla Firefox son
Netscape 4.x No
Netscape 6.x+ Sí
Opera 6.0, 7.0 Macintosh y Windows Sí
Safari 1.2 Sí
Aunque está limitado por la compatibilidad del navegador, la mayoría de los diseñadores le recomiendan que haga esto siempre que sea posible. Pero aún podemos usar CSS para todas las situaciones. Uso de alineación de texto (text-align) Esta solución requiere el uso de la propiedad text-align, que se aplica al elemento del cuerpo y se le asigna el valor de centro.
cuerpo{
alineación de texto:centro;
}
Hace justicia a todos los navegadores, es completo y está al alcance de su mano. Sin embargo, esta es una propiedad dada al texto, lo que hace que el texto en el #contenedor también esté centrado. Por lo tanto, tenemos que hacer un trabajo adicional en el diseño:
div#contenedor{
alineación de texto: izquierda;
}
De esta manera, la alineación del texto se puede devolver al estado predeterminado. Bordes integrados y alineación de texto Debido a que la alineación del texto es compatible con versiones anteriores y los navegadores contemporáneos también admiten bordes adaptables, muchos diseñadores los combinan para lograr el uso entre 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
}
Por desgracia, todavía no es perfecto porque sigue siendo un truco. Tienes que escribir reglas redundantes para la disposición del texto. Pero ahora podemos utilizar una solución multinavegador más perfecta.
Solución de límite negativo