La propiedad de alineación vertical en CSS se usa para especificar la alineación vertical del cuadro de tabla o elemento en línea.
Sintaxis:
vertical-align: baseline|length|sub|super|top|text-top|middle|bottom |text-bottom|initial|inherit;
Nota:
- Esta propiedad se usa principalmente para alinear imágenes con su texto correspondiente.
- Esta propiedad también se puede usar para alinear las celdas dentro de las tablas.
- La propiedad de alineación vertical no se puede utilizar para la alineación de elementos de nivel de bloque como p, ol, ul, h1, div, etc.
Valores de propiedad:
- línea base: Alinea la línea base del elemento correspondiente a la línea base del padre. Esto puede variar según el navegador. Es el valor predeterminado.
- sub: Alinea la línea base del elemento correspondiente a la línea base del subíndice de su padre.
- super: Alinea la línea base del elemento correspondiente a la línea base del superíndice de su padre.
- text-top: Alinea la parte superior del elemento correspondiente a la parte superior de la fuente del padre.
- text-bottom: alinea la parte inferior del elemento correspondiente a la parte inferior de la fuente principal.
- medio: Alinea el medio del elemento correspondiente al medio del padre.
- top: Alinea la parte superior del elemento correspondiente a la parte superior del elemento más alto en su línea.
- bottom: Alinea la parte inferior del elemento correspondiente a la parte superior del elemento más corto en su línea.
- longitud: Alinea la línea de base del elemento a la longitud dada por encima de la línea de base de su padre. Se permite un valor negativo.
- porcentaje: alinea la línea de base del elemento correspondiente al porcentaje dado por encima de la línea de base de su padre, siendo el valor un porcentaje de la propiedad line-height.
- initial: inicializa el valor al valor predeterminado.
- heredar: hereda el valor del elemento principal.
Ejemplo: Este ejemplo explica todos los valores de la propiedad de alineación vertical.
<!DOCTYPE html>
<html>
<head>
<title>
CSS vertical-align Property
</title>
<style>
.img1 {
vertical-align: baseline;
}
.img2 {
vertical-align: sub;
}
.img3 {
vertical-align: super;
}
.img4 {
vertical-align: text-top;
}
.img5 {
vertical-align: text-bottom;
}
.img6 {
vertical-align: middle;
}
.img7 {
vertical-align: top;
}
.img8 {
vertical-align: bottom;
}
.img9 {
vertical-align: 25px;
}
img.img10 {
vertical-align: 100%;
}
.img11 {
vertical-align: baseline;
}
.img12 {
vertical-align: inherit;
}
</style>
</head>
<body>
<h2>vertical-align: baseline</h2>
<p>
<img class = "img1" src =
"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"
alt = "" class="alignnone size-medium wp-image-862984" />
A computer science portal
</p><br>
<h2>vertical-align: sub</h2>
<p>
<img class = "img2" src =
"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"
alt = "" class="alignnone size-medium wp-image-862984" />
A computer science portal
</p><br>
<h2>vertical-align: super</h2>
<p>
<img class = "img3" src =
"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"
alt = "" class="alignnone size-medium wp-image-862984" />
A computer science portal
</p><br>
<h2>vertical-align: text-top</h2>
<p>
<img class = "img4" src =
"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"
alt = "" class="alignnone size-medium wp-image-862984" />
A computer science portal
</p><br>
<h2>vertical-align: text-bottom</h2>
<p>
<img class = "img5" src =
"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"
alt = "" class="alignnone size-medium wp-image-862984" />
A computer science portal
</p><br>
<h2>vertical-align: middle</h2>
<p>
<img class = "img6" src =
"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"
alt = "" class="alignnone size-medium wp-image-862984" />
A computer science portal
</p><br>
<h2>vertical-align: top</h2>
<p>
<img class = "img7" src =
"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"
alt = "" class="alignnone size-medium wp-image-862984" />
A computer science portal
</p><br>
<h2>vertical-align: bottom</h2>
<p>
<img class = "img8" src =
"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"
alt = "" class="alignnone size-medium wp-image-862984" />
A computer science portal
</p><br>
<h2>vertical-align: length</h2>
<p>
<img class = "img9" src =
"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"
alt = "" class="alignnone size-medium wp-image-862984" />
A computer science portal
</p><br>
<h2>vertical-align: percentage</h2>
<p>
<img class = "img10" src =
"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"
alt = "" class="alignnone size-medium wp-image-862984" />
A computer science portal
</p><br>
<h2>vertical-align: initial</h2>
<p>
<img class = "img11" src =
"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"
alt = "" class="alignnone size-medium wp-image-862984" />
A computer science portal
</p><br>
<h2>vertical-align: inherit</h2>
<p>
<img class = "img12" src =
"https://media.geeksforgeeks.org/wp-content/uploads/gfgc.png"
alt = "" class="alignnone size-medium wp-image-862984" />
A computer science portal
</p>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad de alineación vertical se enumeran a continuación:
- cromo 1.0
- Borde 4.0
- Firefox 1.0
- Safari 1.0
- Ópera 4.0
Publicación traducida automáticamente
Artículo escrito por DannanaManoj y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA