css-quiz-centering-things.md

👋🏼 Welcome 👋🏼

Instagram | Twitter | LinkedIn

Choose your language 👅

• English
• Spanish

English version 🚀

How can the container element center an element with only 2 lines of code ?

Click here to see the correct answer and explanation 👀

Correct Answer	Explanation
C	place-items is a shorthand to set both align-items and justify-items at once. By setting it to center, both align-items and justify-items are set to center.

Explanation based on 👉🏼 Ten modern layouts in one line of CSS | Web Dev

Code:

HTML:

<div class="container">
   <div class="item"></div>
</div>

CSS:

.container {
  background: mistyrose;
  display: grid;
  height: 100px;
  place-items: center;
  width: 100px;
}

.item {
  background: hotpink;
  border-radius: 50%;
  height: 40px;
  width: 40px;
}

Spanish version 🚀

¿El elemento contenedor cómo puede centrar un elemento con sólo 2 líneas de código?

Haz click aquí para ver la respuesta correcta y su explicación 👀

Respuesta correcta	Explicación
C	place-items es una forma abreviada de configurar align-items y justify-items a la vez. Al establecer place-items en center, align-items y justify-items también se establecen en center.

Explicación basada en 👉🏼 Ten modern layouts in one line of CSS | Web Dev

Código completo:

HTML:

<div class="container">
   <div class="item"></div>
</div>

CSS:

.container {
  background: mistyrose;
  display: grid;
  height: 100px;
  place-items: center;
  width: 100px;
}

.item {
  background: hotpink;
  border-radius: 50%;
  height: 40px;
  width: 40px;
}

Muy bueno! Muchas gracias por tu aporte. Lo tendré en cuenta 😊

C. Justify+align = Place , de esa manera hacemos las dos intrusiones en una sola linea 💚