Alinear texto verticalmente

Este es un truco que me enseño mi compañero de trabajo Toni Bullón. Si alguna vez necesitáis alinear texto verticalmente, podéis combinar los atributos de css; display:table, display:table-cell y vertical-align:middle para poder conseguir ese efecto.

Ejemplo de alineación vertical de un textoPara hacerlo, solo tenéis que poner en el bloque principal el atributo display con el valor table y al bloque hijo que tiene el texto, los atributos display con el valor table-cell y vertical-align con valor middle. Con esto conseguiréis un efecto idéntico al de tener una tabla con el atributo valing=middle. Este efecto va muy bien para cuando queréis alinear texto dinámico verticalmente pero no queréis/podéis usar tablas para hacerlo.

Os dejo un ejemplo para mejor comprensión:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="es">
	<head>
		<style type="text/css"> 
			article{
				display:table;
			}
			section{
				display:table-cell;
				vertical-align:middle;
				height:100px;
				border:1px solid #000;
			}
		</style>
	</head>
	<body>
		<article>
			<section>
				Texto centrado verticalmente.
			</section>
		</article>
	</body>
</html>

4 pensamientos en “Alinear texto verticalmente

  1. Ruben Autor

    Dentro de una tabla puedes usar directamente los propios atributos que tiene el tag td.

    Descargar ejemplo.html
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    
    <table border="1" style="height:200px">
      <tr>
        <th>Mes</th>
        <th>Ahorros</th>
      </tr>
      <tr>
        <td valign="top">Enero</td>
        <td valign="top">100 €</td>
      </tr>
      <tr>
        <td valign="bottom">Febrero</td>
        <td valign="bottom">80 €</td>
      </tr>
    </table>
  2. Vladimir

    De todas las posibles soluciones existentes en Internet, esta es la única que sirvió para mi caso en el cual el contenido que necesito alinear es muy dinámico, sin hacks ni nada extraordinario, simple y eficaz.
    Gracias Ruben…

  3. Ezequiel Alonzo

    Hermano me has salvado la vida pero como no tienes una idea jajajaj un abrazo!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *