Os desenvolvedores da Web confiam nos títulos quando desejam destacar uma seção de texto importante na página da web. Os títulos podem ser usados ​​para cumprir diferentes objetivos; No entanto, o principal objetivo permanece o mesmo, e isso é enfatizar texto importante ou separar uma seção de outra. Por padrão, os títulos estão alinhados à esquerda; No entanto, para chamar a atenção do visitante e torná -lo mais visível, você pode definir o título no centro.

Este guia demonstrará como centralizar H1 no CSS.

Como centralizar H1 no CSS?

Para centralizar o H1, usaremos as seguintes propriedades CSS:

• Propriedade de Alinhamento de Texto
• Propriedade de exibição
• Propriedade da posição

Vamos começar com o método um!

Método 1: Use a propriedade de alinhamento de texto para o centro H1 no CSS

No CSS, o “alinhamento de texto”A propriedade é utilizada para definir o texto dos elementos HTML à esquerda, centro ou direito horizontalmente. Geralmente, podemos dizer que esta propriedade é muito útil para o alinhamento de texto.

Aqui, veja o exemplo abaixo para entender como funciona a propriedade de alinhamento de texto.

Exemplo

Temos uma audiência na página da web atualmente alinhada ao lado esquerdo por padrão. Vamos entrar no centro:

No arquivo html, defina o

Marque na seção do corpo e adicione algum texto a ela.

Html

Meu cabeçalho

No arquivo CSS, utilizaremos o “alinhamento de texto”Propriedade e defina seu valor para o“Centro”. Isso alinhará o título H1 ao centro.

CSS

H1
Alinhamento de texto: centro;

Salve o código e abra -o no navegador:

Como você pode ver, centralizamos com sucesso o H1 usando a propriedade CSS Text-Align.

Método 2: Use a propriedade Display para centralizar H1 no CSS

Quando se trata de definir o comportamento do elemento HTML, o ““mostrar”Propriedade é usada. Esta propriedade tem alguns valores úteis, como flex e bloco. Além disso, o comportamento flexível dos elementos é resultado do valor flexível, e o comportamento do bloco dos elementos é resultado do valor do bloco.

Exemplo

Em primeiro lugar, especifique o “mostrar”Propriedade e seu valor para o“flex”. Isso tornará o elemento de cabeçalho flexível. Na próxima etapa, use o “Justify-Content”Propriedade com o valor“Centro”Para definir o título no centro.

CSS

H1
exibição: flex;
Justify-Content: Center;

Saída

O título H1 está alinhado ao centro com sucesso.

Método 3: Use a propriedade de posição para centralizar H1 no CSS

Esse "posiçãoA propriedade é auto-explicativa; Ele decide como um elemento HTML será colocado em alguma posição. A combinação desta propriedade com outras propriedades CSS resultará no cumprimento do objetivo desejado, que está definindo o cabeçalho H1 no CSS.

Exemplo

Para centralizar o H1, o “posição”A propriedade pode ser utilizada com o valor“relativo”. Isso reorganizará a posição normal do elemento. Agora, use o “esquerda”Propriedade e defina seu valor como“40%”Para criar um espaço do lado esquerdo, será criado e nosso cabeçalho será alinhado ao centro.

CSS

H1
Posição: relativa;
Esquerda: 40%;

Saída

Explicamos os métodos mais fáceis de centralizar H1 no CSS.

Conclusão

Para o centro H1, o CSS “alinhamento de texto","mostrar", ou "posiçãoAs propriedades podem ser utilizadas. Para o propósito mencionado, a propriedade de alinhamento de texto será usada com o “Centro”, A propriedade Display será usada com o“flex”Valor, e definiremos o valor da propriedade de posição“relativo”Para obter o resultado desejado. Este artigo abordou como centralizar o H1 usando diferentes propriedades CSS.