Lecciones
Comenzar
Empezar a aprender
CodeGym /Cursos /Frontend SELF ES /Alineación del texto

Alineación del texto

Frontend SELF ES
Nivel 15 , Lección 1
Disponible

6.1 Propiedad text-align

Alineación del texto — es prácticamente el aspecto más importante de la estilización de páginas web, que permite controlar cómo se dispone el texto en los contenedores. CSS proporciona dos propiedades principales para la alineación del texto: text-align y vertical-align. Estas propiedades permiten gestionar la alineación horizontal y vertical del texto respectivamente.

La propiedad text-align gestiona la alineación horizontal del texto dentro de un elemento de bloque. Define cómo se alinea el texto en relación a los bordes del elemento.

Valores

  • left: alinear el texto al margen izquierdo (por defecto para texto de izquierda a derecha)
  • right: alinear el texto al margen derecho (por defecto para texto de derecha a izquierda)
  • center: centrar el texto
  • justify: alinear el texto a los márgenes izquierdo y derecho, añadiendo espacios entre palabras para distribuir el texto de forma uniforme a lo largo del ancho del contenedor
  • start: alinear el texto al inicio (margen izquierdo o derecho dependiendo de la dirección del texto)
  • end: alinear el texto al final (margen derecho o izquierdo dependiendo de la dirección del texto)
C++

Ejemplo de uso:

CSS 
    
      .left {
        text-align: left;
      }

      .right {
        text-align: right;
      }

      .center {
        text-align: center;
      }

      .justify {
        text-align: justify;
      }
HTML 
    
      <body>
        <p class="left">Este texto está alineado a la izquierda.</p>
        <p class="right">Este texto está alineado a la derecha.</p>
        <p class="center">Este texto está centrado.</p>
        <p class="justify">Este texto está justificado. Se extenderá para que el texto ocupe todo el ancho del contenedor.</p>
      </body>

6.2 Propiedad vertical-align

La propiedad vertical-align gestiona la alineación vertical de un elemento respecto a la línea base de su elemento padre. Se utiliza más a menudo para alinear elementos en línea, tales como imágenes, líneas de texto o tablas, verticalmente en una línea de texto u en otro contenedor.

Valores:

  • baseline: alineación con la línea base del elemento padre (valor por defecto)
  • sub: alineación como subíndice
  • super: alineación como superíndice
  • text-top: alineación con la parte superior de la fuente del elemento padre
  • text-bottom: alineación con la parte inferior de la fuente del elemento padre
  • middle: alineación al medio del elemento padre
  • top: alineación con la parte superior del contenedor
  • bottom: alineación con la parte inferior del contenedor
  • Valor en porcentaje: desplaza el elemento un porcentaje especificado respecto a la altura de la línea

Ejemplo de uso:

CSS 
    
      .container {
        height: 100px;
        border: 1px solid #000;
      }

      .baseline {
        vertical-align: baseline;
      }

      .sub {
        vertical-align: sub;
      }

      .super {
        vertical-align: super;
      }

      .text-top {
        vertical-align: text-top;
      }

      .text-bottom {
        vertical-align: text-bottom;
      }

      .middle {
        vertical-align: middle;
      }

      .top {
        vertical-align: top;
      }

      .bottom {
        vertical-align: bottom;
      }

      .percent-50 {
        vertical-align: 50%;
      }
HTML 
    
      <body>
        <div class="container">
          <span class="baseline">baseline</span>
          <span class="sub">sub</span>
          <span class="super">super</span>
          <span class="text-top">text-top</span>
          <span class="text-bottom">text-bottom</span>
          <span class="middle">middle</span>
          <span class="top">top</span>
          <span class="bottom">bottom</span>
          <span class="percent-50">50%</span>
        </div>
      </body>
Comentarios
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION