vertical-align
Del mismo modo que la propiedad text-align, esta propiedad nos permite alinear un elemento de forma vertical un elemento de línea o una celda. Los valores que puede tener entre otros valores son:
- top: el elemento se posiciona en la parte superior del elemento padre.
- middle: el elemento se posiciona en la mitad del elemento padre
- bottom: el elemento se posiciona en la parte inferior del elemento padre.
- text-top: el elemento se posiciona en la parte superior del texto padre.
- text-bottom: el elemento se posiciona en la parte inferior del texto padre.
Cuando queramos alinear bloques de contenido o crear estructuras de diseño utilizaremos flexbox como veremos más adelante.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Aplicando estilos</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1> El título <span>de aquí </span>estará en azul</h1>
<div id="container">
<p>Tenemos un nuevo párrafo por aquí</p>
<p id="destacado">Este párrafo también estará en azul</p>
</div>
<pre>
	console.log("hola mundo");
</pre>
</body>
</html>