O CSS fornece vários estilos de alinhamento, como esquerda, direita, centro, justificada, horizontal e vertical, para diferentes tipos de conteúdo. Mais especificamente, para cabeçote e linhas curtas, o “Centro”O estilo de alinhamento é usado. Usando esse estilo, a aparência do conteúdo pode ser aprimorada e parecerá legal.

Este artigo explicará vários métodos para centralizar o texto verticalmente. Então vamos começar!

Como centralizar o texto verticalmente no CSS?

Existem muitas maneiras de centralizar o texto verticalmente, como “Flexbox","altura da linha","preenchimento","transformar", e a "flutuador" propriedade. Nesta seção, aprenderemos sobre algumas das propriedades mencionadas para centralizar o texto verticalmente no CSS. Mas antes disso, mostraremos o procedimento de texto de alinhamento central.

Exemplo

No HTML, criaremos um contêiner com classe chamada “Centro”E dentro dele, crie um título usando

marcação:

"Aja sem expectativas"

Depois disso, vá para o arquivo CSS e estilize o que você criou no arquivo html.

Aqui ".Centro”É usado para acessar a classe que atribuímos ao . Em seguida, definiremos a largura do contêiner criado para “450px"E a altura para"200px”. Também definimos a fronteira de usar o “fronteira”Propriedade e atribua o valor da fronteira“10px" e "dobro”:

.Centro
Largura: 450px;
Altura: 200px;
borda: 7px duplo;

Após a implementação do código acima, obtemos o seguinte resultado:

Aqui, vemos que o texto é mostrado no canto superior esquerdo da tela. Agora, passamos para a próxima etapa, na qual descreveremos diferentes métodos para centralizar o texto verticalmente usando CSS.

Método 1: Texto central verticalmente no CSS usando Flex

CSS “flex"É o valor do"mostrar" propriedade. É usado para definir conteúdo ou elementos de acordo com o tamanho da viewport. Ele permite que os elementos CSS organizem eficientemente criando espaço igual entre eles.

Sintaxe

Exibição: flex

Então, vamos continuar o exemplo anterior para centralizar o texto verticalmente.

Exemplo

Para definir a posição do texto no centro e na vertical, atribuiremos o valor da propriedade Display como “flex”E alinhar-se como“Centro”:

.Centro
Largura: 450px;
Altura: 200px;
borda: 7px duplo;
exibição: flex;
alinhado-itens: centro;

Isso nos dará o seguinte resultado:

Aqui, podemos ver que nosso texto está alinhado verticalmente e também no centro da div. Agora, vamos mudar para o segundo método.

Método 2: Texto central verticalmente em CSS usando a propriedade de altura de linha

O "altura da linha”Propriedade especifica a altura entre duas linhas dentro dos elementos. É usado para criar espaço entre duas linhas com texto.

Sintaxe

A sintaxe da propriedade de altura de linha é dada como:

altura da linha: valor

Na sintaxe acima, especificaremos a altura da linha como “valor”.

Observação: Na propriedade de altura de linha, não podemos dar um valor negativo.

Exemplo

Agora, utilizaremos a propriedade de altura de linha para definir o texto no centro vertical do . Para fazer isso, no arquivo CSS, defina o valor da propriedade de altura de linha como “150px”:

.Centro
Largura: 450px;
Altura: 200px;
borda: 7px duplo;
altura da linha: 150px;

Isso nos dará o seguinte resultado:

Método 3: Texto central verticalmente em CSS usando preenchimento

Para criar espaço entre a fronteira de um elemento e seu conteúdo, o “preenchimento”Propriedade é usada. É uma propriedade abreviada do CSS que pode ser utilizada para definir o preenchimento de todos os lados em uma única linha.

Sintaxe

A sintaxe da propriedade de preenchimento é:

preenchimento: parte inferior direita superior esquerda esquerda

Aqui está a descrição dos valores acima dos dados da propriedade mencionada:

• principal: É usado para criar espaço a partir do topo.
• certo: É usado para criar espaço a partir da direita.
• botão: É usado para criar espaço a partir do fundo.
• esquerda: É usado para criar espaço a partir da esquerda.

Observação: Especificar dois valores significarão o preenchimento de cima e de baixo e preenchimento da esquerda e direita; No entanto, se um valor for agregado, o preenchimento será aplicado a todos os quatro lados.

Exemplo

Aqui, definiremos o valor do preenchimento como “10%" e "0%”, Onde o primeiro valor indica o preenchimento superior e inferior e o segundo indica preenchimento da esquerda e direita. Além disso, queremos apenas centralizar o texto verticalmente, então definiremos o segundo valor como “0”:

.Centro
borda: 7px duplo;
preenchimento: 10% 0;

Após a implementação do código fornecido, vá para o arquivo HTML, execute -o e verifique a seguinte saída:

Fornecemos métodos diferentes relacionados ao centro de alinhamento do centro verticalmente no CSS.

Conclusão

Para centralizar o texto verticalmente, use o “Flexbox","altura da linha" e "preenchimento”Propriedades do CSS. Essas propriedades permitem que você defina a altura dentro da borda do conteúdo e do elemento. Neste artigo, explicamos como centralizar texto verticalmente usando três métodos diferentes e fornecemos um exemplo de cada método.