Propiedad CSS vertical-align
La propiedad vertical-align especifica la alineación vertical de un cuadro en línea, en línea-bloque o de celda de tabla. Los elementos de nivel en línea incluyen imágenes, texto, botones, etc.
Esta propiedad solo funciona en los siguientes contextos:
- Para alinear verticalmente el contenido dentro de celdas de tabla (
<td>) y elementos condisplay: table-cell. - Para alinear verticalmente el cuadro de un elemento en línea dentro de su cuadro de línea. Por ejemplo, se puede usar para alinear verticalmente
<img>en una línea de texto.
No podemos usar la propiedad vertical-align para alinear verticalmente elementos de bloque. Nota: No centra a los hijos de nivel bloque; para eso usa margin: 0 auto o Flexbox/Grid.
| Valor inicial | baseline |
|---|---|
| Se aplica a | Elementos de nivel en línea y de celda de tabla, también se aplica a ::first-letter y ::first-line. |
| Heredado | No. |
| Animable | No. |
| Versión | CSS1 |
| Sintaxis DOM | object.style.verticalAlign = "middle"; |
Sintaxis
Sintaxis de la propiedad CSS vertical-align
css
vertical-align: baseline | length | sub | super | top | text-top | middle | bottom | text-bottom | initial | inherit;Ejemplo de la propiedad vertical-align con el valor "sub":
Ejemplo de la propiedad CSS vertical-align con el valor sub
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
vertical-align: sub;
}
</style>
</head>
<body>
<h2>Vertical-align property example</h2>
<p>This is some paragraph with
<span>vertical-align</span> property.
</p>
</body>
</html>Resultado
Ejemplo de la propiedad vertical-align con el valor "middle":
Ejemplo de la propiedad CSS vertical-align con el valor middle
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
vertical-align: middle;
}
</style>
</head>
<body>
<h2>Vertical-align property example</h2>
<p>This is some paragraph with
<span>vertical-align</span> property.
</p>
</body>
</html>Ejemplo de la propiedad vertical-align con el valor "super":
Ejemplo de la propiedad CSS vertical-align con el valor super
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
vertical-align: super;
}
</style>
</head>
<body>
<h2>Vertical-align property example</h2>
<p>This is some paragraph with
<span>vertical-align</span> property.
</p>
</body>
</html>Ejemplo de la propiedad vertical-align con los valores "top" y "bottom":
Ejemplo de la propiedad CSS vertical-align con los valores top y bottom
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid #cccccc;
}
td {
height: 100px;
}
.top {
vertical-align: top;
}
.bottom {
vertical-align: bottom;
}
</style>
</head>
<body>
<h2>Vertical-align property example</h2>
<table>
<tr>
<th>Bottom</th>
<th>Middle</th>
<th>Top</th>
</tr>
<tr>
<td class="bottom">Some text</td>
<td>Some text</td>
<td class="top">Some text</td>
</tr>
</table>
</body>
</html>Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| baseline | Alinea la línea de base del elemento con la línea de base de su padre. Este es el valor predeterminado. | Pruébalo » |
| length | Desplaza la línea de base del cuadro hacia arriba (valor positivo) o hacia abajo (valor negativo) en relación con la línea de base del padre. | Pruébalo » |
| sub | Baja la línea de base del cuadro a la posición adecuada para los subíndices del cuadro del padre. | Pruébalo » |
| super | Sube la línea de base del cuadro a la posición adecuada para los superíndices del cuadro del padre. | Pruébalo » |
| top | Alinea la parte superior del subárbol alineado con la parte superior del cuadro de línea. | Pruébalo » |
| text-top | Alinea la parte superior del cuadro con la parte superior del área de contenido del padre. | Pruébalo » |
| middle | Alinea el punto medio vertical del cuadro con la línea de base del cuadro del padre más la mitad de la altura x del padre. | Pruébalo » |
| bottom | Alinea la parte inferior del subárbol alineado con la parte inferior del cuadro de línea. | Pruébalo » |
| text-bottom | Alinea la parte inferior del cuadro con la parte inferior del área de contenido del padre. | Pruébalo » |
| initial | Hace que la propiedad use su valor predeterminado. | Pruébalo » |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Qué hace la propiedad CSS 'vertical-align'?