vertical-align

<< text-overflow text-decoration >>

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>
            &#0009;console.log("hola mundo");
          </pre>
     </body>
</html>

<< text-overflow text-decoration >>