Publicado por Juan Pablo el 9.Mar.2007 | Comentarios (9)
Una de las preguntas más recurrentes en foros y lista sobre CSS es la típica: ¿Cómo centro un DIV (o caja, o capa) en CSS?. También es una pregunta muy habitual en mi correo, así pienso que sería buena idea documentar su respuesta, aquí vamos.
En estricto rigor un documento XHTML está conformado por módulos, módulos dotados de un significado muy específico (semántico) que es definido en un DTD (Document Type Declaration - Declaración del Tipo de Documento). Entre éstos módulos existe uno llamado Módulo de Bloque (también llamado Módulo de Texto en Bloque). Este módulo contiene elementos tales como blockquote, div, h1, h2, etc. Es por ello que llamanos a estos elementos: Elementos de Bloque.
Bonito el Elemento de Bloque, ¿pero como lo identifico?: Un Elemento de Bloque se distingue fácilmente porque genera un renglón en el flujo de texto, esta nueva línea contiene un espacio superior y otro inferior, el elemento de bloque más conocido es el elemento párrafo (p). Por decirlo de alguna forma, lo contrario a un elemento de bloque es un elemento de línea, por lo tanto un elemento de línea NO genera una nueva línea en el flujo del texto. Un ejemplo típico de elemento de línea es el elemento de énfasis (em). Vale decir que los elementos de línea pertenecen al Módulo de Texto en línea.
Listo, ya tenemos algunas definiciones, ahora ataquemos el problema: Tengo la necesidad de alinear al centro una división o bloque en la súper página que estoy desarrollando: ¿Cómo lo hago usando CSS?
Easy, ¡usa una tabla!. La creyeron ¿ah?, pongámonos serios y vamos a lo que dice la W3C:
[...] if both margins are 'auto', their computed values are equal.
Si ambos márgenes son auto (en un elemento de bloque) el valor calculado es igual. ¡Perfecto!, mi problema está solucionado. Cómo div es un elemento de bloque sólo tengo setear sus márgenes en auto, ¡pan comido!.
Vamos al xhtml:
<div id="contenedor">
<p>Centradito lo quiero ¿ok?</p>
</div>Acordaremos que el bloque que vamos a centrar tendrá un ancho que abarcará 70% de la página, ¿ok pana?, ahora nuestra hoja de estilo (CSS) :
#contenedor {
width:70%;
margin-left:auto;
margin-right:auto;
}Recuerda que puedes abreviar la regla de nuestro margen simplemente usando: margin: 0 auto. Tu diras: ¿y eso era todo?, esto no tiene chiste.; ¡calma tiburón!, ¿no quisiste hacerlo con apego a estándares?, ¡sufre ahora con esta info cabrón! (estoy leyendo muchos blogs mexicanos): si ahorita, perdón, si probamos nuestra página tal cual como está se verá como queremos en Firefox, IE 6 y IE 7 ...pero.
Como tu eres un chico/a cool y con apego a los estándares, el requisito básico es que todas tus páginas tengan definido el tipo de documento que renderizará el navegador, ¿chino mandarín?, me refiero a esto carnal:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strictSi la página que estás desarrollando no tiene definido el DOCTYPE (puede ser estricto o transicional) y vez tu página en IE 6 o 7 lamento comunicarte que todo lo que hemos hecho hasta aquí es igual a nada (en Firefox se verá bien - al menos en la versión 2.0). Como es habitual, nuestros amigos de Microsoft haciéndonos la vida imposible: ¿Qué mi..piiii pasa aquí?, aquí la historia:
Quirks mode hace referencia a una técnica usada por algunos navegadores para mantener la compatibilidad hacia atrás con páginas web diseñadas para navegadores más antiguos
Si no tienes definido el DOCTYPE los IE's asumen que la página se debe renderizar en Quirk Mode, lo que significa que será mostrada al estilo web de los 90's, y en la web de los 90's los elementos de bloque eran tratados de la misma manera que los elementos de línea; por lo tanto aplicarle un margin: 0 auto no tiene ningún sentido puesto que el DIV es interpretado como un elemento de línea y no de bloque, se nos fue al tacho de la basura la hoja de estilo, ¡nada funciona! - me siento mal, ¿alguien tiene una aspirina?.
text-align?Si Internet Explorer quiere jugar rudo jugaremos rudo. Si al elemento contenedor (en nuestro caso el body) le aplicamos la propiedad text-align:center centrará todo lo que esté bajo él al centro. Teniendo esto en mente nuestra hoja de estilo tendrá una nueva versión:
body {
text-align:center;
}
#contenedor {
width:70%;
margin:0 auto;
}Dado que la propiedad text-align se heredará tenemos todo los elementos alineados al centro —¡demonios!— para volver todo a la normalidad dentro de nuestro bloque debemos aplicar la última regla que contrarrestará este comportamiento; ¡exacto!, alinear el bloque al la izquierda.
body {
text-align:center;
}
#contenedor {
width:70%;
margin:0 auto;
text-align: left;
}¡Felicitaciones!, finalmente tenemos un elemento de bloque centrado que se ve bien en IE 5,6,7 y para que decir de Firefox.
Simple, si deseas centrar un elemento en CSS, debes:
autotext-align al contendor superior y dejar contento al los IE's.Si el elemento que deseas centrar es de línea, por ejemplo una imagen; sólo debes mostrarla como un elemento de bloque, ¿y como hago esto?, usando CSS:
img {
margin:0 auto;display:block;
}Yo por lo general tengo una clase que aplico a las imagenes que deseo centrar:
/* CSS */
.imgCentrada {margin:0 auto;display:block}
<!-- xhtml -->
<img src="imagen.gif" width="100" height="150" class="imgCentrada" />El infaltable, una demostración en vivo y en directo. Hasta la próxima.
Enlace Permanente, Comentarios (9), Publicada en: CSS | XHTML
IE tiene un problema (tremenda novedad), si al elemento contenedor (en nuestro caso el body) le aplicamos la propiedad text-align:center centrará todo lo que esté bajo él al centro, es un comportamiento absurdo Por lo que tengo entendido las propiedades del elemento contenedor se deben heredar a los elementos hijos, por lo tanto no es un comportamiento absurdo. Creo que en Firefox se produce la misma acción.
transnoche bug; no se que estaba pensando, gracias; ciertamente tu comentario es el acertado, la propiedad es heredada.
ma-es-tro :D
donde venden muñequitos juque pa comprar en navidad? xD
;)
PD: Aun espero mis 5 dolares
eh, eran 10 xD
Yo siempre centro lso elementos cuando ya tengo un width predeterminado, vale decir:
div#divPrincipal { width:720px; margin-left:auto; margin-right:auto; }
Oh gran maestro, no puedo evitar ver que usted en otro gran ejemplo usa XHTML, pues resulta que en mi andar por la web veo que el XHTML no se esta usando (o más bien sirviendo) bien, al ver esto me digo que es mejor usar HTML y dejar el XHTML para cuando pueda ser usado (o soportado), por eso al ver este gra tutorial no puedo evitar el preguntarle si tendra usated una luz que me aclare las cosas, ¿Porque usar XHTML y no HTML?
¿Por qué uso XHTML?, porque creo que es una forma de marcar texto rigurosa y limpia - Me gusta porque mis documentos se ven exactamente igual en todos los navegadores - me gusta porque se _acopla_ perfectamente con otras tecnologías como CSS, XSLT o EcmaScript - me gusta porque es un estándar el cual me da la tranquilidad de que prevalecerá en el tiempo - me gusta porque tiene compatibilidad hacia atrás - me gusta porque debes estudiar para usarlo - me gusta porque indica profesionalismo y me gusta porque es la tecnología que la W3C recomienda y si tipos tan capacitados te "recomiendan" su uso, por algo será.
¿Por qué no se usa el XHTML? - creo que simplemente por ignorancia y la nula capacidad de visión de aquellos que desarrollan sitios webs y se dicen _profesionales_; aquellos todavía no entienden que el HTML también evoluciona y dicha evolución va en directo beneficio de todos los usuarios de la red.
Así que te recomiendo que uses XHTML y hagas oído sordo a los argumentos de quienes todavía hacen sitio estilo años 90's.
Interesante lo que dice, le he enviado unos enlaces a su del.icio.us a ver si los lee cuando tenga tiempo. Saludos y muchas gracias por la respuesta
Juan Pablo Aqueveque, Algunos derechos reservados, 1998-2024.
A menos que se exprese lo contrario los contenido de este sitio están
publicado bajo una licencia Creative Commons.
Este sitio está alojado en Dreamhost.
