Una tarea fácil y común para CSS es alinear texto o imágenes en el centro de cualquier contenedor.
Sintaxis:
.container{
text-align: center;
}
Ejemplo 1: Usamos la propiedad de alineación de texto de CSS para centrar el elemento horizontalmente seguido de la propiedad de alineación vertical y visualización para alinear el elemento con el centro del contenedor verticalmente. Los siguientes ejemplos ilustran el enfoque:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.container{
text-align: center;
height: 200px;
width : 200px;
display: table-cell;
vertical-align: middle;
border: 2px solid green;
}
</style>
</head>
<body>
<div class="container">
<p>Centered Text</p>
</div>
</body>
</html>
Producción :
El texto está centrado en el contenedor.
Ejemplo 2: Otro método es usar la propiedad de alineación de texto para centrar el elemento horizontalmente con la propiedad de altura de línea para alinear los elementos en el centro del contenedor verticalmente. Los siguientes ejemplos ilustran el enfoque:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.container2{
width: 200px;
line-height: 180px;
height: 200px;
text-align: center;
border: 2px solid green;
}
</style>
</head>
<body>
<div class="container2">
<p>Centered Text</p>
</div>
</body>
</html>
Producción:
El texto está centrado en el contenedor.
Publicación traducida automáticamente
Artículo escrito por deveshkumarsharma y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA