LabEx
EntrarJunte-se

Centralização com Display Table

Beginner

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

Introdução

Neste laboratório, aprenderemos como centralizar um elemento filho dentro de seu elemento pai usando display: table. Ao usar esta técnica, podemos facilmente alcançar o centralização vertical e horizontal sem ter que recorrer a posicionamento complexo ou JavaScript. Esta é uma habilidade útil para ter ao projetar layouts responsivos para websites e aplicações.

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 com Display Table

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

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

  1. Adicione um elemento container com height e width fixos.
<div class="container"></div>
  1. Adicione o elemento filho dentro do elemento container e dê a ele a classe .center.
  <div class="center"><span>Conteúdo centralizado</span></div>
</div>
  1. No CSS, aplique os seguintes estilos ao elemento container:
  • Defina height e width para os valores fixos desejados.
  • Adicione uma borda (opcional).
.container {
  border: 1px solid #9c27b0;
  height: 250px;
  width: 250px;
}
  1. No CSS, aplique os seguintes estilos ao elemento filho:
  • Use display: table para fazer com que o elemento .center se comporte como um elemento <table>.
  • Defina height e width para 100% para fazer com que o elemento preencha o espaço disponível dentro de seu elemento pai.
  • Use display: table-cell no elemento filho para fazê-lo se comportar como um elemento <td>.
  • Use text-align: center e vertical-align: middle no elemento filho para centralizá-lo horizontalmente e verticalmente.
.center {
  display: table;
  height: 100%;
  width: 100%;
}

.center > span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

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 com Display Table. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.