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 hace 15 años  

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

Responder
JMiur hace 15 años  

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

Responder
Gem@ hace 15 años  

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

Responder
Mauricio Andrian hace 15 años  

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 hace 15 años  

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

Responder
Gem@ hace 15 años  

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

Responder
JMiur hace 15 años  

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

Responder
EPA hace 14 años  

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 hace 14 años  

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 hace 14 años  

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

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 hace 14 años  

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

Responder
huseyin topcu hace 13 años  

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 hace 13 años  

¿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