Colocación de elementos mediante CSS

La entrada de hoy está dedicada a problemas del día a día para la colocación de elementos mediante CSS con recetas sencillas para resolverlos.

En la prehistoria, si se quería un contenido centrado nada era más fácil que poner un <center></center>, pero eso, aparte de viejuno, ahora mismo como te pillen haciéndolo, te cortan las manos.

The <center> tag is supported in all major browsers. However, it is deprecated and should be avoided!

Así que ahora, los más listos habrán dicho que poniendo (con perdón del estyle inline) un <div style="text-align: center;"></div> ya se arregla todo y se quedan tan panchos. Pues sí y no. Si se quiere centrar un texto, va perfecto, pero... y si lo que se quiere centrar es otro contenedor como por ejemplo un div o un span... centraríamos el texto del segundo contenedor, pero no el contenedor en sí.

Pues para este tipo de disyuntivas, vamos a ver algunas recetas copy-paste.

Centrado de texto
Tal y como hemos visto, la propiedad CSS text-align:center hace el trabajo necesario.

Centrado de bloques de texto
Más que centrado, se le puede llamar márgenes equivalentes, que por ende, produce un efecto de centrado. Ni qué decir tiene, que sin especificar un ancho, no sirve de mucho.

P.bloqueCentradoDeTexto { margin-left: auto; margin-right: auto; width: 300px;}

Centrado de imágenes
Equivalente al centrado de texto. La única diferencia es que para que funcione, hay que convertir la imagen en un bloque con display:block.

img.imagenCentrada { display: block; margin-left: auto; margin-right: auto; width: 300px;}

Centrado vertical
Subamos la dificultad un nivel. En las tablas es muy sencillo... existe la propiedad CSS de vertical-align: middle, bueno, pues con otros elementos de bloque es también muy sencillo. El secreto es hacer que el contenedor de dichos elementos se comporte como una celda de tabla para aplicar la propiedad CSS de vertical-align dando además un alto al contendor.

div.containerDeBloqueCentradoVerticalmente { height: 500px; display: table-cell; vertical-align: middle;}

Final Boss. Colocando elementos en la esquina inferior derecha.
Hay dos maneras, o con un "float: right" que sirve en los casos en los que el contenedor crece con los contenidos, pero si tenemos un contenedor que no solo no crece si no que a lo mejor tiene un alto fijo, no funciona. Para ello, hay una receta sencilla para conseguirlo sin tener que recurrir a código javascript mediante position:absolute. La pega es para variar IE6, que tiene un bug calculando el alto de elementos, pero que se evitar mediante hacks. Para la receta, defino dos clases, una para el contenedor ".contenedor" y otra para el contenido ".alineadoEnLaEsquina" (en este caso un hipervínculo).

div.contenedor { 

    position: relative; 

    height: 1%; /* Hack para el IE6 */

}

a.alineadoEnLaEsquina { 

    position: absolute; 

    bottom: 0; /* en vez de 0 y 0 se puede poner otra cantidad */

    right: 0;  /* para simular el margen respecto a la esquina */

}

A disfrutarlo!.