English

Learn HTML-CSS: How To Vertically Center Text with CSS?

Vertically centering text with CSS is not easy when compared to aligning text horizontally. There are different cases to handle when it comes to vertically centering text with CSS. Let’s go through them one by one.

Vertically aligning a single line of text

To vertically align a single line of text you need to use line-height property.

<html lang="en">

   <head>

       <meta charset="utf-8">

       <title>Hello World</title>

   </head>

   <body>

       <div id="vertical">

Hello, Livecoding!

</div>

   </body>

</html>

The CSS to achieve it is as follows:

#vertical {

 height: 90px;

 line-height: 90px;

 text-align: center;

 border: 5px solid green;

}

Handling multiple lines of text

To handle multiple lines of text, you need to use the <span> tag to your advantage. So, how do you do it? Let’s take a look at the following code:

<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;

}

So, how does it all work?

  1. First, the <span> tag sets the height of <div> tag using the line-height property.
  2. The <span> also becomes an inline-block with the use of the vertical-align: middle.
  3. With <span> now an inline-block, it can be set at middle by using vertical-align: middle which works great for inline-block elements.
  4. After that, the line-height is set to normal, enabling the inner content to flow according to the size of the div height and line-height property.

The second method could be a bit complex. However, it works great on all browsers. Do you have anything to add to the tutorial? If yes, then don’t forget to comment below.

You can also check on our website for videos about HTML/CSS. Below are some examples:

  • WordPress Theme Creation (part 8) – CSS
  • HTML5: Coding a Modern Website (part 4) – HTML-CSS

You can also follow some of our broadcasters who program in JavaScript as below:

  Elijahwass99

 MarcTannous

Another cool way to find out interesting things about HTML/CSS is to access our project page!

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.

View Comments

  • This is one of the common questions I have seen with HTML5. How to center X using CSS. It can be div or a text. Just read the how to center div tag and now this. Thanks so much!

Recent Posts

Win Big with Our Amazon Fire Max 11 & AirPods Pro Giveaway!

We’re thrilled to announce an exciting opportunity for you to win not one but two…

1 month ago

Unleashing Potential: How Education Ecosystem Transforms Learning into Real-World Success

Acquiring practical skills is crucial for career advancement and personal growth. Education Ecosystem stands out…

3 months ago

The Role of Artificial Intelligence in Modern Software Development

Artificial Intelligence (AI) has been making significant strides in various industries, and the software development…

6 months ago

Highest Stable Coin Yields – (W16 – 2024)

Another week to bring you the top yield platforms for three of the most prominent…

7 months ago

LEDU Token OTC Trading

If you hold a large volume of LEDU tokens above 1 million units and wish…

8 months ago

Highest Stable Coin Yields – (W12 – 2024)

It’s another week and like always we have to explore the top yield platforms for…

8 months ago