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.

Alinear algo verticalmente no es tan sencillo como debería serlo. No hay una solución universal, todo depende de cada caso ¿Es un texto, corto? ¿Son imágenes de distinta altura? ¿Son elementos combinados?

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 ...

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