En este artículo, aprenderemos cómo alinear el texto verticalmente usando CSS y aunque CSS2 no admite la alineación vertical. Pero podemos alinear los bloques centrales verticalmente, combinando algunas propiedades. El truco consiste en especificar que el bloque exterior se formateará como una celda de la tabla porque el contenido de una celda de la tabla se puede centrar verticalmente. Usaremos la propiedad de alineación vertical que especifica la alineación vertical del cuadro de tabla o elemento en línea.
Sintaxis:
DIV.container {
min-height: 10em;
display: table-cell;
vertical-align: middle }
...
DIV {
GeeksforGeeks
}
Ejemplo: este ejemplo describe el uso de la propiedad de alineación vertical junto con la propiedad de visualización como celda de tabla.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Horizontal and Vertical alignment</title>
<style>
div {
height: 200px;
width: 400px;
border: 2px dashed #4b2869;
}
.container {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="container">GeeksforGeeks</div>
</body>
</html>
Producción:
Existe un enfoque más versátil para alinear el texto verticalmente. Funcionará tanto para una sola línea como para varias líneas de texto, pero aún requerirá un contenedor de altura fija.
Sintaxis:
div {
height: 200px;
line-height: 200px;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
El CSS solo dimensiona el div, alinea verticalmente el centro del tramo estableciendo la altura de línea del div igual a su altura, y hace que el tramo sea un bloque en línea con vertical-align: middle. Luego, vuelve a establecer la altura de línea normal para el lapso, de modo que su contenido fluya naturalmente dentro del bloque.
Ejemplo: Este ejemplo describe cómo alinear el contenido verticalmente con una altura fija del contenedor.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Horizontal and Vertical alignment </title>
<style>
div {
height: 200px;
line-height: 200px;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
</style>
</head>
<body>
<div>
<span>GeeksforGeeks</span>
</div>
</body>
</html>
Producción:
CSS es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .
Publicación traducida automáticamente
Artículo escrito por shefali163 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA