Centrar elementos en una página web es una habilidad fundamental para crear diseños limpios y atractivos. En este blog, exploraremos diversas técnicas para centrar elementos, ya sean divs, texto o ítems, utilizando HTML y CSS. A lo largo del artículo, presentaré ejemplos individuales para cada tipo de elemento.
Supongamos que tenemos el siguiente HTML básico:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centrar Divs con Flexbox</title>
<link rel="stylesheet" href="/Centrar/style.css">
</head>
<body>
<div class="container">
<p>Contenido centrado</p>
</div>
</body>
</html>
Para lograr centrar el contenido que tenemos dentro de nuestro div haremos lo siguiente en nuestro style.css
Centrar texto
.container{
text-align: center;
}
En el paso anterior observamos las características para centrar el texto que contiene nuestro div, ahora para poder centrar nuestro div en la pantalla utilizaremos las propiedades del margin y jugaremos con ellas para centrar horizontalmente nuestro div
Centrado Horizontal del Div
.container{
text-align: center;
width:700px;
height: 100px;
margin: auto;
background-color: aquamarine;
}
Los divs son elementos contenedores muy comunes en HTML, y centrarlos puede ser esencial para organizar el diseño de una página web. Hay varias formas de lograrlo, pero una de las más efectivas es utilizando Flexbox.
HTML modificado
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centrar Divs con Flexbox</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="centered-div">
<p>Contenido centrado</p>
</div>
</div>
</body>
</html>
Style Centrar en la pantalla
.container {
display: flex;/*
Esto permite que los elementos hijos dentro del contenedor se comporten de manera flexible en relación con el eje principal
*/
justify-content: center; /*Centrar Horizontalmente*/
align-items: center;/*Centrar Verticalmente*/
height: 100vh;
}
.centered-div {
background-color: lightblue;
padding: 20px;
}
¡Contáctanos!
Si tienes preguntas, aclaraciones, sugerencias de temas o cualquier otra consulta, ¡no dudes en ponerte en contacto con nosotros! Por favor, completa el formulario de contacto disponible en este enlace, y estaremos encantados de ayudarte.