Diversos métodos de centralização usando HTML

Coisas que eu quero fazer

Este artigo resume métodos para centralizar texto em HTML, uma técnica que parece simples, mas é surpreendentemente difícil.

Preparar

Primeiro, identifique qual etiqueta você deseja centralizar.

Provavelmente é uma das duas opções a seguir.

O método de implementação varia dependendo da tag que você deseja centralizar.

contente

Texto e imagens, etc.

bloquear

Área contendo múltiplos conteúdos

Exemplo: Declarado em uma div, etc.

implementação

contente

Direção lateral

PaisA tag recebe o estilo `text-align:center`.

Observe que você não deve definir isso em um elemento span ou img, como mostrado no exemplo abaixo.

Além disso, como esse estilo exibe o conteúdo no centro do bloco pai, o bloco pai (uma div no exemplo abaixo) deve ser exibido no centro da tela ou com largura de 100%.

<div style ="text-align:center;width:100%">
 <span>aaaaa</span>
 <img src="img.jpg">
</div>

Exemplo:Apaguei a imagem.

Vertical

PaisA tag recebe o estilo `align-content: center`.

Observe que você não deve definir isso em um elemento span ou img, como mostrado no exemplo abaixo.

Além disso, como esse estilo exibe o elemento no centro do bloco pai, você precisa especificar a altura do bloco pai (uma div no exemplo abaixo).

<div style ="align-content:center;height:500px">
 <span>aaaaa</span>

</div>

Exemplo:Apaguei a imagem.

bloquear

Direção lateral

Especifique o estilo `margin: 0 auto` para as tags que você deseja centralizar.

(O fundo da div é amarelo para maior clareza.)

<div style ="margin: 0 auto; width:100px; background-color:yellow">
 <span>aaaaa</span>
 <img src="img.jpg">
</div>

Exemplo:Removi a imagem.

Vertical

É um pouco trabalhoso, mas eu fiz assim.

(Para maior clareza, o fundo da div é amarelo e o fundo da div pai é vermelho.)

<div style="height:300px;background-color:red;position: relative;">

<div style="background-color:yellow;position: absolute;height:50%;top: 0;bottom: 0;margin: auto;">
 <span>aaaaa</span>
</div>

</div>

Exemplo:Apaguei a imagem.

Resultado

Consegui centralizar o texto usando HTML.

bônus

Aqui está um exemplo de código para alinhamento de texto à esquerda, ao centro e à direita nos cabeçalhos de documentos.

<div style="display:inline-block; width:30%;text-align:left">left</div><div style="display:inline-block; width:40%;text-align:center">center</div>
<div style="display:inline-block; width:30%;text-align:right">right</div>

Exemplo:(As cores de fundo à esquerda e à direita foram alteradas.)