BusinessesE-Learning

Como centralizar um texto verticalmente usando CSS?

como-centralizar-um-texto-verticalmente-usando-css

Centralizar um texto verticalmente com CSS não é fácil quanto centralizar horizontalmente. Existem várias maneiras de se fazer isso e cada é mais adequada que a outra dependendo do caso. Vamos passar por cada uma dessas maneiras.

Alinhando verticalmente uma única linha de texto

Para alinhar verticalmente uma única linha de texto, você precisa usar a propriedade line-height.

O código CSS é o seguinte:

Lidando com várias linhas de texto

Para tratar várias linhas de texto, você precisa usar a tag <span>. Então fazer isso? Vamos dar uma olhada no seguinte código:

CSS:

HTML CSS web development alignment web design

Então, como tudo isso funciona?

  • Primeiro, a tag <span> define a altura da tag <div> usando a propriedade line-height.
  • O <span> também se torna um bloco inline com o uso do vertical-align: middle.
  • Com <span> agora um bloco inline, ele pode ser definido alinhado ao centro usando vertical-align: middle que funciona muito bem para elementos de bloco inline.
  • Depois disso, a altura da linha é definida como normal, permitindo que o conteúdo interno flua de acordo com o tamanho da altura div e da propriedade line-height.

O segundo método pode ser um pouco complexo. No entanto, ele funciona muito bem em todos os navegadores. Você tem alguma coisa para adicionar ao tutorial? Se sim, não se esqueça de comentar abaixo.

Você também pode assistir em nosso site a vídeos sobre HTML e CSS.

Abaixo estão alguns exemplos:

WordPress Theme Creation in CSS

CSS: Creating a dark web (Edge Extension)

About author

About Author Dr. Michael Jurgen Garbade is the founder of LiveEdu.TV, Kyuda, Education Ecosystem. He is future Venture Capitalist, Future Politician and always on the lookout for the Next Big Challenge. Obtained Masters in business administration and physics, and a Ph.D. in finance with professional work experience in high-paced environments at Fortune 500 companies like Amazon and General Electric. Expertize: Python, PHP, Sencha Touch & C++, SEO, Finance, Strategy & E-commerce. He speaks English and German and has worked in the US, Europe, and Asia. At Education Ecosystem he is the CEO and runs business operations.