JMiur [E]

A diferencia del centrado horizontal, alinear algo verticalmente no es tan sencillo o, mejor dicho, no parece tan evidente. No hay una solución universal para alinear cosas, todo depende.

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?

24 comentarios:

Lagarto  

Interesante, y util en esas ocasiones en que no podemos centrar las cosas y nos desesperamos, jajajaja

Responder
Shark_Bloody  

Ja, esta bien explicado ;)

Tengo una pregunta ¿Hay alguna forma de mostrar los últimos post visitados?

Al estilo "Últimos comentarios", pero que se muestren los últimos post visitados.

Responder
Graciela  

Tan bien explicado esto, como en la anterior que mencionas!
Una tiende a ser muy 'vagoneta', quiere todo armadito y que el blog quede de 10, dejo aquí mi confesión Sr. Jmiur :D

Responder
Alex  

Hola JMiur, ya te añadí a los enlaces de mis blogs.
Saludos.
Alex.

Responder
Bocha  

URGENTE!!!!!

Tengo un problema en el blog y no se solucionarlo...!!

En casi todas las imagenes aparece un cuadrado tipo Link, y antes no se veia de esa forma.QUEDA MUY FEO Y LO QUIERO SACAR!

Mira esta imagen: http://img44.imageshack.us/img44/8320/4545234.png (ESE ES EL PROBLEMA)

Todo este problema comenzo cuando yo coloque la paginacion de las entradas, para suplantar los enlaces de navegacion. Cuando me di cuenta saque inmediatamente el codigo y el problema sigue igual.

QUE HAGO, ESTOY MUY PREOCUPADO.

Responder
Bocha  

Ya esta, Arreglado el problema.. saludos.

Responder
Juan Pedro  

Excelente!!! Muchas veces nos quedamos boyando para alinear imágenes con texto... es lo que con frecuencia me sabe ocurrir.

Gracias!!!

Responder
JMiur  

Lagarto:
El alineado vertical siempre es un problema.

Shark_Bloody:
Me parece que no, no veo de donde puedes extraer ese dato. eso es algo que sólo es accesible a través de algún servicio de estadísticas; no sé si habrá alguno que te de esa posibilidad.

Graciela:
No pasa a todos y este tema es de los más complicados de resolver.

Alex:
Gracias, es un honor :D

Juan Pedro:
Oh si, así es. Es unánime :D

Responder
Alex  

Hola JMiur, yo también tengo un problema con el alineamiento, en este caso de una barra de menú horizontal, le he dado mil vueltas y no soy capaz de centrarla (¿sera que soy muy torpe?) aparece hacia la derecha, se puede ver AQUÍ es la barra que contiene los géneros de las películas... acción, drama, ciencia ficción etc.
A ver si me podéis echar un cable, se agradecería.
Saludos.
Alex.

Responder
egoloco  

Hola JMiur. Como te lleva el calor?

Si me permitís, es un alineamiento perfecto para un perfecto Post-Footer, lo guardo para más adelante, a ver que me sale, despues te cuento... Saludos!

Responder
JMiur  

Alex:
Como los items flotan, sólo puedes centrar el contenido usando padding. Algo así:
#menu ul {
list-style-type:none;
margin:0;
padding:0 0 0 28px;
}

Responder
Alex  

Perfecto, ahora esta centrada, nuevamente muchas gracias por tu ayuda JMiur.
Saludos.
Alex.

Responder
JMiur  

Me alegro, Alex :)

Responder
Stella  

Gracias!! Está explicado de manera muy clara!!

Saludos!

Responder
Claudio - Poca Tinta  

Siempre guardo estos post tan bien explicados.

Es que pertenezco al grupo de Homo-poco-memoriusus

Esta genial

Responder
JMiur  

Señor Claudio, ¡tanto tiempo!!! :D

Responder
EPA  

Hola !!! Help!!!!
Ya no sé que más probar (siempre codigos copy-paste...je.je.je) para centrar verticalmente un conjunto "imagen + texto al pie" dentro de un div de ciertas dimensiones..

Se vé aqui:
http://lh6.ggpht.com/_Pe-iq3mf1eg/S8MJ_g3wYXI/AAAAAAAAAjc/TFtzXNuFdn8/s800/centrar%20imagen%20con%20texto.JPG

Tambien puse un div externo al conjunto imagen+texto con align middle...ni por si acaso...
Alguna ayudita???
Gracias
Gra

Responder
JMiur  

EPA:
Dependerá de la complejidad del contenido pero, un buen truco para hacer algo omo muestras en el ejemplo, es crear dos DIVs, un externo y otro interno. El externo es simialr al que usas, tendrá width y height pero, le agregaremos position: relative. El interno es la clave; lo posicionaremos en el centro del otro rectángulo usando position: absolute, estableciendo su tamaño con width y height pero, usando porcentajes (50%) y diciendole que left y top (que es donde se ubicará) es el 25%. Por ejemplo:

<div style="background-color: #888;height:250px;margin:0 auto;position:relative;width:400px;">
<div style="height:50%;left:25%;position:absolute;text-align:center;top:25%;width:50%;">
<img src="URL_imagen" style="display:block;margin:0 auto;">
<span style="color:#333;">TEXTO QUE VA ABAJO</span>
</div>
</div>

aquí hay un ejemplo

Veré si hago un post explicando un poquito más del asunto.

Responder
EPA  

Ok !!!! Genial !!!!
Mil gracias !!!!
Saludos cordiales
Graciela

Responder
JMiur  

Espero que haya sido útil :D

Responder
Ricardo Escobar  

Utilizo mucho la última solución, la de los divs con display table y el p table-cell

Muchas gracias!!

Responder
Silvia Cotillas  

He estado viendo varias paginas y en esta he encontrado la solucion. Gracias mil :)

Responder
Silvia Cotillas  

Informacion muy util gracias mil :)

Responder
Martín Rodríguez  

¡Es usted un maestro!, me ha evitado otra hora de busqueda en el universo web, gracias por el aporte del "line-height" igual al "height"

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