InicioCurso de Frontend Developer
Curso de Frontend Developer
3

Como centrar un elemento de un div

Maria
maria-castillo-berto
171

Hola a todos!
En esta ocasión explicare como pueden centrar un elemento de un div 👩‍💻

  1. Tenemos que crear un div con un identificador en mi caso lo llame class = container
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="stylesheet"href="style.css"><title>Document</title></head><body><divid="container"></div></body></html>
  1. Luego creamos el elemento, en mi caso cree un <p></p>
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="stylesheet"href="style.css"><title>Document</title></head><body><divid="container"><p>centrame</p></div></body></html>
  1. Continuamos con la creación del .css. En el file agregamos los estilos propios del #containe.
#container{
  background-color:red;
  width:100px;
  height:100px;
}

4 . Finalmente, vamos a centrar el elemento usando Flex

#container{
  background-color:red;
  width:100px;
  height:100px;
  display:flex;
  justify-content:center;
  align-items:center;
}

Resultado

0
hace un año
Escribe tu comentario
+ 2

Entradas relacionadas

1

Tutorial de como colocar backgrounds utilizando ccs

La manera correcta de hacer esto es en una pestaña de ccs dentro del editor de codigo o abriendo la etiqueta &lt;Style&gt; &lt;/Style&gt; de
marioxcachazo
marioxcachazo
1

Cómo hacer un piano sencillo con dos teclas de color rosa usando HTML y CSS

En este tutorial te mostraré cómo crear un piano básico con dos teclas usando solo HTML y CSS. Las teclas serán de color rosa y, cuando haga
carozamb
carozamb
9

Crea un Piano con Botones usando HTML y CSS

Hola! 😄 Acompáñame en este pequeño tutorial a través del cual construiremos el aspecto gráfico de un piano usando botones de HTML y estilos
robledocorrea
robledocorrea
4

Domina la creación de tarjetas HTML y CSS: ¡Conviértete en un maestro de las 🃏 Cards en Frontend! 🚀

En este emocionante tutorial, vamos a sumergirnos en el fascinante mundo de la creación de tarjetas HTML y CSS. Si eres como yo, un apasiona
cpedrozamesa
cpedrozamesa