E-Learning

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

vertical-seoVertically 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.

The CSS to achieve it is as follows:

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:

CSS

vertical center css

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!

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.
Related posts
Career DevelopmentContent Creators

Meet Yuzby, An Inspiring Developer From Nigeria

Data Science

R Tutorial for Data Science Part 1

Content CreatorsCryptocurrency

Main Technical Differences between Tron, VET, NEO and Ethereum Blockchains

Coding Community

Google's Go Programming Language Is Going Places—By How Far?