26 Abril, 2007 por jairo
La maquetacion web con hojas de estilos ( CSS ) puede llegar a ser mas
complicada que si lo hacemos de la forma tradiccional con tablas y es que el
mayor problema a la hora de definir la forma de un documento con CSS es que
no todas las propidades CSS se comportan igual o no son validas para todos
los navegadores.
A esto hay que sumar bugs
que algunos navegadores tienen y que tenemos que solucionar mediante lo que
llaman CSS Hack que son pequeñas alteraciones que incluimos en las hojas
de estilo como por ejemplo ocultar ciertas propiedades para un navegador.
El
uso de CSS Hack no es muy recomendado pero a veces resulta imposible realizar
las cosas de otra manera.
Uno de los asuntos que trae mas quebraderos de cabeza sobre todo a maquetadores
que estan acostumbrados a utilizar tablas es el
centrado
de elementos en un documento.
Hay varios tipos de centrado y metodos para centrar los elementos con CSS
y XHMTL pero muchos de ellos no funcionan correctamente en la mayoria de los
navegadores modernos. Voy a explicar y poner un ejemplo de los distintos tipos
de centrados con los que nos podemos encontrar y que funcione en la mayorÃa
de los navegadores.
Centrado horizontal de texto.
Si queremos centrar texto horizontalmente basta con utilizar la propiedad
'text-align:center' en alguno de los elementos considerados como elementos
bloque tales como un P, H1, DIV, etc. Todo el texto sera centrado incluido
el de los bloques que esten dentro.
HTML:
<p style="text-align: center">Texto centrado horizontalmente
</p>
Resultado:
Texto centrado horizontalmente
Centrado horizontal de bloques.
Si queremos centrar un bloque (no el texto del bloque) o mejor dicho si queremos que
el margen derecho e izquierdo sean iguales debemos utilizar la propiedad 'margin:auto'
y asignarle un tamaño. Si no asignamos el tamaño el bloque se expandirá y utilizará
el espacio disponible y no parecerá centrado.
CSS:
.blockcenter{ display: block;
margin-left: auto;
margin-right: auto;
width:200px;
background-color:#FFCCFF;
text-align:center; /*Habilitar si también queremos centrar el contenido.*/ }
HTML:
<p class="blockcenter"> Bloque centrado
</p>
Resultado:
Bloque centrado
Centrado horizontal de una imagen.
El centrado de una imagen horizontalmente es similar al centrado de un bloque,
pero sin necesidad de poner el tamaño.
CSS:
IMG.imgcenter{
display: block;
margin-left: auto;
margin-right: auto;
}
HTML:
<img src="dog.jpg" alt="perro" class="imgcenter" />
Resultado:
Centrado vertical y horizontal de una imagen (Hack).
Este caso es el más complejo puesto que tenemos que hacer uso de Hack
para ocultar o visualizar propiedades para un determinado navegador. Podrás
encontrar otras formas de centrar una imagen pero muchas de ellas no funciona
si no conoces los tamaños de la imagen, mientras que este ejemplo no es necesario
definir los tamaños de la imagen.
La solución serÃa asignar al contenedor la propidead 'display: table-cell';
'vertical-align: middle' para simular el comportamiento de la celda de una
tabla. Esto funciona para navegadores basados en Gecko, Opera 6+, Safari, pero
no para IE y Mac.
La idea es crear un pequeño contenedor in-line como por ejemplo un SPAN y asignarle
la misma altura que el contenedor padre y usuando de nuevo 'vertical-align:middle'.
Eso sà el SPAN tiene que tener como tamaño mÃnimo 1px para que funcione bien.
Si quereis utilizar este mismo código para centrar un bloque sólo
funciona con el motor Gecko. Mira más abajo como hacerlo para todos
los navegadores.
CSS:
<style> .vhcenter { display: table-cell; text-align: center; vertical-align: middle; width:500px; height: 300px } .vhcenter * { vertical-align: middle; } /* IE/Mac \*//*/ .vhcenter { display: block; line-height: 0.6; } .vhcenter span { display: inline-block; height: 100%; width: 1px; } /*El siguiente código sólo se ejecutará en caso de que sea el navegador Internet Explorer*/ </style><!--[if IE]>
<style> .vhcenter span { display: inline-block; height: 100%; } </style><![endif]-->
HTML:
<p class="vhcenter" style="background-color: #ccffcc"> <span></span><img src="dog.jpg" /></p>
Resultado
Centrar un bloque horizontal y verticalmente (Hack).
CSS:
<style type="text/css"> .wrap0 { height:401px; width:500px; background: #f4f4f4; } /*\*/ .wrap0 { display: table-cell; vertical-align: middle; width: 100%; } /*/ .openm, .wrap1 { display: inline-block; vertical-align: middle; } .wrap1 { width: 100%; } .openm { height: 100%; width: 1px; margin-left: -1px; } /**/ </style><!--[if IE]>
<style> .openm, .wrap1 { display: inline; zoom: 1; vertical-align: middle; } .wrap1 { width: 100%; } .openm { height: 401px; } /* IE7? (layout comunque da width) */ .wrap0 { height: auto; } </style><![endif]-->
HTML:
<div class="wrap0" style="background-color:#FFFFCC"> <div class="wrap1" style="background-color:#CCFFFF">Bloque centrado horizontal y verticalmente
</div> <div class="openm"></div> </div>
Resultado:
Bloque centrado horizontal y verticalmente
Enlaces de interés:
http://www.student.oulu.fi/~laurirai/www/css/middle/
http://phrogz.net/CSS/vertical-align/index.html
Loading ...
(1 votos, media: 4 de 5)
Abril 26th, 2007 a las 3:15 pm
Me has salvado, ya se dónde buscar la próxima vez que tenga que centrar algo con css, siempre olvido como hacerlo. :S
Mayo 10th, 2007 a las 9:20 am
Que bueno, por fin me deshago de la etiqueta “center” .
Mayo 11th, 2007 a las 2:25 pm
Te lo has currado, ya te tengo en favoritos dentro de la sección manuales.