FC ConcursosFC Concursos

Questão FC688366

Considere‑se o código a seguir. <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF‑8”> <meta name=”viewport” content=”width=device‑width, initial‑scale=1.0”> <link rel=”sty

Desenvolvimento Web

QUADRIX · 2025

Considere‑se o código a seguir.

 

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF‑8”>

<meta name=”viewport” content=”width=device‑width, initial‑scale=1.0”>

<link rel=”stylesheet” href=”styles.css”>

<title>Document</title>

</head>

<body>

<div class=”container‑pai”>

<div>Conteúdo</div> \(\leftarrow\) Sem largura definida \(\rightarrow\)

</div>

</body>

</html>

 

Com base no código descrito, assinale a opção que apresenta o conteúdo do arquivo styles.css que, quando aplicado à div cuja classe é container‑pai, fará com que a div filha que não tem largura definida seja centralizada horizontalmente.

  1. .container‑pai{

    margin: auto;

    }

  2. .container‑pai{

    text‑align: center;

    }

  3. .container‑pai{

    position: absolute; left: 50%;

    }

  4. .container‑pai{

    display: flex;

    justify‑content: center;

    }

  5. .container‑pai{

    align‑items: center;

    }

Mostrar resposta e comentário

Gabarito

D

Comentário do professor

.container‑pai torna o elemento um flex container com display: flex;. Isso transforma a div interna em um flex item, passando a obedecer ao modelo flexível em vez do fluxo de bloco padrão.

justify-content: center; alinha os itens ao centro ao longo do eixo principal. Como o eixo principal padrão é horizontal (row), a div filha será posicionada no centro horizontalmente.

Como a div filha não tem largura definida, ela usa sua largura intrínseca (conteúdo). O uso combinado de display: flex; e justify-content: center; garante que essa largura seja centralizada dentro do elemento pai.

Se também for necessário centralizar verticalmente, pode-se adicionar align-items: center; no mesmo seletor.

Conteúdo do catálogo FC Concursos · Atualizado em

Continue aprendendo