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

Lo más simple es centrar verticalmente los textos de una etiqueta. En cualquier bloque (DIV P LI ), si establecemos una altura con height, basta colocar la propiedad line-height con el mismo valor para que el texto quede centrado:
<div style="height: 100px; font-size:20px; line-height: 100px;"> ....... </div>
Cum sociis natoque penatibus et magnis dis parturient montes.

Valores inferiores a la altura (line-height: 50px;) harán que el texto se muestre arriba y esto es lo que ocurre normalmente ya que el valor estandard de sesa propiedad es normal y eso significa que es más o menos igual a una vez y media la altura de la fuente del texto.

Valores superiores a la altura (line-height: 150px;) harán que el texto se muestre abajo:

Cum sociis natoque penatibus.
Cum sociis natoque penatibus

Para centrar elementos que tienen diferentes alturas, lo más común es usar la propiedad vertical-align con un valor de middle. Por ejemplo:
<div style="text-align: center; vertical-align: middle; ">
<span style="font-size: 22px;">malesuada sed</span>
<span style="font-size: 32px;">malesuada sed</span>
<span style="font-size: 16px;">malesuada sed</span>
</div>
malesuada sed malesuada sed malesuada sed

Pero esto no centrará demasiado bien, la propiedad, deberíamos colocarla en cada una de las etiquetas internas y no en el contenedor:
<div style="text-align: center;">
<span style="vertical-align: middle; font-size: 22px;">malesuada sed</span>
<span style="vertical-align: middle; font-size: 32px;">malesuada sed</span>
<span style="vertical-align: middle; font-size: 16px;">malesuada sed</span>
</div>
malesuada sed malesuada sed malesuada sed

Esto, es aplicable tanto a textos como a imágenes:
<div style="font-size: 16px; text-align: center;">
texto texto texto
<img style="vertical-align: middle;" src="URL_imagen" />
texto texto texto
</div>
Ut et justo sem quisque aliquam ultrices libero id mattis.

Con varias líneas, se vería algo así:

Praesent purus velit, pharetra at dictum ac, ornare vitae lectus. Cras libero lorem, rutrum fermentum elementum nec, ultrices vel odio? Donec consequat porttitor fringilla. In nec odio quis elit vehicula aliquet ac in enim.

Si las cosas son más complicadas, nada impide usar una tabla:
<table style="margin: 0 auto; padding: 10px; width: 500px;">
<tbody>
<tr>
<td> ... un texto corto ... </td>
<td> <img src="unaImagenGrande" /> </td>
<td> ... un texto largo ... </td>
<td> <img src="otraImagenPequeña" /> </td>
</tr>
</tbody>
</table>
Nulla a risus in diam gravida mollis in sed velit.Donec consequat porttitor fringilla. In nec odio quis elit vehicula aliquet ac in enim. Nam sit amet purus non sapien imperdiet consectetur sed vel ligula. Donec libero dui.

En los navegadores modernos, incluyendo IE8, hay una posibilidad extra, el uso de la propiedad display con valores denominados table y table-cell. Vamos a crear unas definicones de estilo para no escribir mucho:

<style>
#mitablita {display: table; margin: 0 auto; width: 500px;}
#mitablita p {display: table-cell; padding: 5px; vertical-align: middle;}
</style>

<div id="mitablita">
<p> ... un texto corto ... </p>
<p> <img src="unaImagenGrande" /> </p>
<p> ... un texto largo ... </p>
<p> <img src="otraImagenPequeña" /> </p>
</div>

Nulla a risus in diam gravida mollis in sed velit.

Donec consequat porttitor fringilla. In nec odio quis elit vehicula aliquet ac in enim. Nam sit amet purus non sapien imperdiet consectetur sed vel ligula. Donec libero dui.

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

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