WhatsApp

  
Centrar Elementos con HTML y CSS
Div, texto e ítems


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.

En resumen, las listas y las tuplas son estructuras de datos importantes en Python, cada una con sus propias características y casos de uso. La elección entre una lista y una tupla dependerá de los requisitos específicos del programa y la naturaleza de los datos que se están manipulando.
Sebastian Granados 1 abril, 2024
Compartir
Categorías


Iniciar sesión dejar un comentario

  
Contenido Relevante, Experiencia Sobresaliente: Claves para una Gestión de Contenido Efectiva