vagacode

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, todo depende.

Dicen que, si sólo se trata de textos, lo más simple es establecer la altura del contenedor con height y darle a la propiedad line-height el mismo valor; de ese modo, el texto quedará en el centro:

<div style="height: 100px; line-height: 100px;"> ....... </div>

Valores inferiores a la altura harán que el texto se muestre arriba y esto es lo que ocurre normalmente ya que el valor estándar de esa 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. Por el contrario, valores superiores harán que el texto se muestre abajo.

Para centrar elementos que tienen diferentes alturas, lo más común es usar la propiedad vertical-align con un valor de middle en cada una de las etiquetas interiores y esto es aplicable tanto a textos como a imágenes:

<div>
	<span style="vertical-align: middle; font-size: 48px;">malesuada sed</span>
	<img src="url_imagen" style="vertical-align: middle;">
	<span style="vertical-align: middle; font-size: 16px;">malesuada sed</span>
</div>

malesuada sed malesuada sed

Todo muy bonito pero eso, sólo funcionará si el texto tiene una sola línea ...

Claro, todo es más fácil usando tablas y la propiedad display viene al rescate con dos valores table y table-cell:

<style>
	#mitablita {display: table;}
	#mitablita p {
		display: table-cell;
		padding: 1em;
		text-align: center;
		vertical-align: middle;
	}
</style>

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

Esta forma de generar tablas sin usar tablas es muy flexible porque podemos variar el tamaño de cada celda de manera dinámica y todo permanecerá centrado; otro ejemplo:

<style>
	#demoV {
		display: table;
		height: auto;
		margin: 0 auto;
		width: 100%;
	}
	#demoVinner {
		display: table-cell;
		vertical-align: middle;
	}
	#demoVinner div {
		margin: 0 auto;
		text-align: center;
		width: 250px;
	}
	#demoVinner div img {
		display: block;
		margin: 0 auto;
	}
	#demoVinner div span {
		font-size:24px;
	}
</style>

<div id="demoV">
	<div style="display: table-cell;vertical-align: middle;">
		<div id="demoVinner">
			<img src="url_imagen">
			<span>... un texto ...</span>
		</div>
	</div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

VARIAR EL ANCHO: width: 300px; | width: 500px; | width: 600px; | width: 100%
VARIAR LA ALTURA: height: 300px; | height: 400px; | height: 500px; | height: auto