Education Ecosystem Blog

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.

<html lang="en">


  <head>


      <meta charset="utf-8">


      <title>Hello World</title>


  </head>


  <body>


      <div id="vertical">


Hello, Livecoding!


</div>


  </body>


</html>

O código CSS é o seguinte:

#vertical {


height: 90px;


line-height: 90px;


text-align: center;


border: 5px solid green;


}

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:

<html lang="en">


  <head>


      <meta charset="utf-8">


      <title>Hello World</title>


  </head>


  <body>


      <div id="vertical">


        <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>


</div>


  </body>


</html>

CSS:

#vertical {


height: 150px;


line-height: 150px;




text-align: center;


border: 5px solid green;


}


span {


display: inline-block;


vertical-align: middle;


line-height: normal;


}

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)

Dr. Michael J. Garbade

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.