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)

Avatar
About author

I, Dr. Michael J. Garbade is the co-founder of the Education Ecosystem (aka LiveEdu), ex-Amazon, GE, Rebate Networks, Y-combinator. Python, Django, and DevOps Engineer. Serial Entrepreneur. Experienced in raising venture funding. I speak English and German as mother tongues. I have a Masters in Business Administration and Physics, and a Ph.D. in Venture Capital Financing. Currently, I am the Project Lead on the community project -Nationalcoronalvirus Hotline I write subject matter expert technical and business articles in leading blogs like Opensource.com, Dzone.com, Cybrary, Businessinsider, Entrepreneur.com, TechinAsia, Coindesk, and Cointelegraph. I am a frequent speaker and panelist at tech and blockchain conferences around the globe. I serve as a start-up mentor at Axel Springer Accelerator, NY Edtech Accelerator, Seedstars, and Learnlaunch Accelerator. I love hackathons and often serve as a technical judge on hackathon panels.