LabEx
EntrarJunte-se

Domínio do Layout de Grade Centralizado

Beginner

This tutorial is from open-source community. Access the source code

Introdução

Neste laboratório, exploraremos o conceito de centralização em grade (grid centering) usando CSS. Você aprenderá como centralizar horizontalmente e verticalmente um elemento filho dentro de um elemento pai usando o layout grid. Ao final deste laboratório, você terá uma sólida compreensão de como usar as propriedades justify-content e align-items para criar um layout perfeitamente centralizado.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 100%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Centralização em Grade (Grid Centering)

index.html e style.css já foram fornecidos na VM.

Para centralizar um elemento filho tanto horizontalmente quanto verticalmente dentro de um elemento pai, siga estes passos:

  1. Crie um layout de grade (grid layout) usando display: grid.
  2. Use justify-content: center para centralizar o filho horizontalmente.
  3. Use align-items: center para centralizar o filho verticalmente.

Aqui está um exemplo de estrutura HTML:

<div class="parent">
  <div class="child">Conteúdo centralizado.</div>
</div>

E o CSS correspondente:

.parent {
  display: grid;
  justify-content: center;
  align-items: center;
  height: 100px;
}

Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Resumo

Parabéns! Você concluiu o laboratório de Centralização em Grade (Grid Centering). Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.