Skip to main content Skip to docs navigation
En GitHub

Alineación vertical

Cambia fácilmente la alineación vertical de los elementos en línea, de bloque en línea, de tabla en línea y de celda de tabla.

Cambia la alineación de los elementos con las utilidades vertical-alignment. Ten en cuenta que la alineación vertical solo afecta a los elementos en línea (inline), bloque en línea (inline-block), tabla en línea (inline-table) y celda de tabla.

Elije entre .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom y .align-text-top según sea necesario .

Para centrar verticalmente el contenido que no está en línea (como <div>s y más), usa nuestras utilidades de cuadro flexible.

Con elementos en línea:

baseline superior medio inferior texto-superior texto-inferior 
<span class="align-baseline">baseline</span>
<span class="align-top">superior</span>
<span class="align-middle">medio</span>
<span class="align-bottom">inferior</span>
<span class="align-text-top">texto-superior</span>
<span class="align-text-bottom">texto-inferior</span>

Con celdas de tabla:

baseline superior medio inferior texto-superior texto-inferior 
<table style="height: 100px;">
  <tbody>
    <tr>
      <td class="align-baseline">baseline</td>
      <td class="align-top">superior</td>
      <td class="align-middle">medio</td>
      <td class="align-bottom">inferior</td>
      <td class="align-text-top">texto-superior</td>
      <td class="align-text-bottom">texto-inferior</td>
    </tr>
  </tbody>
</table>

Sass

API de utilidades

Las utilidades de alineación vertical se declaran en nuestra API de utilidades en scss/_utilities.scss. Aprende a usar la API de utilidades. 

    "align": (
      property: vertical-align,
      class: align,
      values: baseline top middle bottom text-bottom text-top
    ),