JMiur [E]

Alinear algo verticalmente no es simple a menos que se trate de cosas sencillas y cuando pretendemos hacerlas un poco más complejas se vuelve una tarea titánica y generalmente nos damos por vencidos o recurrimos a márgenes, paddings y aritmética.

Estos son dos métodos diferentes para tratar de resolver el problema.

Para el primero, lo que necesitamos hacer es tener dos DIVs, un contenedor externo y un contenedor interno. El truco, consiste en utilizar la propiedad position para centrar el contenido justo en la mitad del contenedor:

<style>
#contenedor1 {
position: relative;
height: 300px; width: 450px; /* le damos un ancho y un alto */
margin:0 auto; /* eventualmente, lo centramos */
}
#contenido1 {
position: absolute;
height: 50%; width: 50%; /* y centramos todo */
left: 25%; top: 25%;
text-align: center; /* incluyendo los textos */
}
#contenedor1 img { /* la imagen del demo también la centramos */
display: block;
margin: 0 auto;
}
</style>

<div id="contenedor1">
<div id="contenido1">
<img src="URL_imagen"/>
<span> ... un texto cualquiera ... </span>
</div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Este tipo de solución funcionará en casi cualquier navegador incluyendo Internet Explorer. Por el contrario, el segundo método que es mucho más interesante y flexible sólo funcionará en navegadores actualizados: IE8, Firefox, Safari, Chrome y Opera.

Utiliza una propiedad diferente llamada display y algunos de los nuevos valores que se han ido agregando como son table y table-cell; es decir, de alguna manera, generamos una tabla sin usar las etiquetas de tablas y aprovechamos una de sus mayores ventajas: la posibilidad de centrar verticalemente el contenido de esas pseudo-celdas.

El esquema es muy similar al anterior, sólo usamos un DIV extra:
<style>
#contenedor2 {
display: table;
height: 300px; width: 450px; /* le damos un ancho y un alto */
margin:0 auto; /* eventualmente, lo centramos */
}
#contenido2 {
display: table-cell;
vertical-align: middle; /* centramos verticalmente */
}
#pseudo-celda {
width: 250px; /* establecemos el ancho */
margin: 0 auto; /* centramos el contenido */
text-align: center;
}
#contenedor2 img { /* la imagen del demo también la centramos */
display: block;
margin: 0 auto;
}
</style>

<div id="contenedor2">
<div id="contenido2">
<div id="pseudo-celda">
<img src="URL_imagen"/>
<span> ... un texto cualquiera ... </span>
</div>
</div>
</div>
¿Por qué es más flexible? Porque podemos variar su tamaño de manera dinámica y todo permanecerá centrado.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

13 comentarios:

egoloco  

Quietita "lechuga"... ni te muevas!!! jeje Muy interesante. De este modo nos ahorramos dolores de cabeza. Saludos!

Responder
JMiur  

Sí, el segundo método es muy pero muy bueno :D

Responder
Gem@  

Pensaba que con vertical-align estaba todo solucionado. Buen dato ;)

Responder
Andrian Mauricio  

Excelente el segundo método JMiur, yo hasta ahora para alinear verticalmente mi solución era tirar la toalla jaja.
Ahora cuento con tu post ;)
Muchísimas gracias.

Responder
Oloman  

Lo de vertical-align siempre me había dado problemas, pero con este par de trucos la cosa se pone mejor. Gracias.

Responder
Gem@  

jajajajaja que gracias me hizo Andrian Mauricio "yo hasta ahora para alinear verticalmente mi solución era tirar la toalla" pues no está mal, es un remedio para terminar pronto :D

Responder
JMiur  

Gem@:, Oloman:
No, vertical-align no sirve para eso. Sólo sirve para alinear elementos inline, por ejemplo, un texto con una imagen:
blablablabla <img src="imagen" style="vertical-align:middle" /> blablablabla

Andrian
Me alegro que sea útil y que no haya que tirar la toalla :D

Responder
EPA  

Gracias de nuevo !!
Finalmente es complicado..que increible...(al menos para mí), lo bueno es tener la opcion de hacerlo segun el navegador de nuestros usuarios lectores (mejor dicho lo que uno cree que tienen: en google analytics no figura la version del navegador)
Mis saludos!!
Graciela

Responder
La hormiguita  

Muchas gracias, lo he hecho, pero si bien tengo la lechuza en el medio, me gustaria ponerle color y bordes diferentes a los cuadrados o los div, como el suyo y trate de hacerlo.... niet... como se hace?
Y bueno no se sirve,lo que voy a comentar, como me estaba volviendo loca para alinear una lista de precios ... imposible... hice una tabla en Dreamweaver, copie y pegué en el blog y así quedo prolijo. :)

Responder
JMiur  

EPA:
Es complicado porque en CSS no hay propiedades que controlen eso.

La hormiguita:
En caso de problemas, aunque los "puristas" se enojen, yo recurro siempre a una tabla y listo :D

Por si sirve de algo, en el segundo demo, estas son las propiedades que usé:

#contenedor2 {display:table;height:300px;width:450px;background-color:#404951;border:1px solid #D0D9E1;margin:20px auto;}
#contenido2 {display:table-cell; vertical-align:middle;}
#pseudo-celda {background-color:#101921;margin:0 auto;width:250px;text-align:center;padding:10px;-moz-border-radius:10px;}
#pseudo-celda img {display:block;margin:0 auto;}
#pseudo-celda span {color:#EEE;font-size:16px;}

Responder
La hormiguita  

Muchísimas gracias, a la tarde pruebo como queda!!!!:)

Responder
huseyin topcu  

JMiur, pero mira, qué dolor de cabeza me da esto, en este enlace(http://www.destinoturquia.com/index.php?sec=destacados_dos) las ofertas aparecen alineadas verticalmente, no hay manera de que se aparezcan listas una debajo de otra? gracias desde ya

Responder
JMiur  

¿A que parte del sitio te refieres?

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR