Como posso centralizar o texto dentro de um div

Ao projetar páginas da web, os desenvolvedores podem adicionar vários componentes, incluindo imagens, texto, tabelas e outros. Além disso, o texto pode ser alinhado em um div usando várias propriedades CSS. O método mais popular para o texto central horizontalmente é utilizar o “alinhamento de texto”Atributo. Além disso, você também pode usar o “altura da linha" e "Alinhamento vertical”Atributos para alinhar verticalmente o texto.

Este post indicará o método para centralizar o texto verticalmente e horizontalmente dentro de uma div.:

Como centralizar o texto de texto horizontalmente dentro de uma div?

Para centralizar o texto horizontalmente dentro de uma div, consulte o procedimento fornecido.

Etapa 1: faça um contêiner div

Inicialmente, crie um contêiner de div com a ajuda do “" elemento. Então, insira um “eu ia”Atributo dentro da etiqueta de abertura da div. Depois disso, incorpore algum texto entre a tag Div:

Linuxhint é um dos melhores sites para criação de conteúdo.

Saída

Etapa 2: Acesse o contêiner Div para o centro alinhado

Agora, acesse o contêiner da div com a ajuda do “eu ia”Nome do atributo com seletor“#”E aplique as seguintes propriedades CSS:

#Align-content
largura: 80%;
margem: 0 automático;
preenchimento: 20px;
Antecedentes: #C8EDF3;
Alinhamento de texto: centro;
Cor: RGB (49, 15, 240);

Aqui:

• • ““largura”A propriedade é utilizada para definir o tamanho da largura do contêiner.
  • ““margem”Especifica um espaço em branco fora do recipiente.
  • ““preenchimento”Define um espaço dentro do limite do elemento.
  • ““fundo”Define a cor de fundo na parte traseira do elemento.
  • ““alinhamento de texto”A propriedade é utilizada para definir o alinhamento do texto como“Centro”.
  • ““cor”Especifica uma cor para o texto dentro do limite.

Pode -se observar que tenhamos um texto alinhado centrado com sucesso horizontalmente dentro da div e criada:

Como centralizar o texto verticalmente dentro de uma div?

Para centralizar o texto verticalmente dentro de um recipiente de div, siga as instruções fornecidas.

Etapa 1: Acesse o contêiner Div

Primeiro de tudo, acesse o contêiner Div criado.

Etapa 2: aplique propriedades CSS no texto central verticalmente

Em seguida, aplique as propriedades CSS listadas abaixo para centralizar o texto verticalmente em uma div:

#Align-content
Exibição: Tabela de células;
Largura: 300px;
Altura: 150px;
preenchimento: 10px;
cor azul;
cor de fundo: RGB (248, 215, 166);
borda: 3px tracejado #f09d03;
Alinhamento vertical: meio;

De acordo com o snippet de código acima:

• • Colocou o "mostrar”Isso especifica o comportamento da exibição do elemento como“célula de mesa”, O que significa que age como a célula da tabela no elemento div.
  • ““largura”Propriedade especifica o tamanho da largura do elemento.
  • ““altura”Define a altura do elemento.
  • ““preenchimento”Define um espaço em branco dentro do elemento.
  • ““cor”É utilizado para definir a cor do texto dentro do elemento.
  • ““cor de fundo”Especifica a cor da parte traseira do elemento.
  • ““fronteira”Propriedade define um limite em um elemento.
  • ““Alinhamento vertical”A propriedade é utilizada para definir o alinhamento vertical de um elemento definido no“meio”.

Saída

Você aprendeu sobre o procedimento completo para centralizar o texto dentro do contêiner em ambos os lados, vertical e horizontalmente.

Conclusão

Para centralizar o texto vertical e horizontalmente dentro de uma div, primeiro, crie um contêiner div com a ajuda do elemento e acesse -o utilizando o seletor. Em seguida, aplique propriedades CSS nas quais os “alinhamento de textoA propriedade é utilizada para o alinhamento horizontal e “Alinhamento vertical”Define o alinhamento vertical. Este post demonstrou os métodos para centralizar o texto vertical e horizontalmente dentro de uma div.