Alinear verticalmente

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.