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; }
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?
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:
You can also follow some of our broadcasters who program in JavaScript as below:
Another cool way to find out interesting things about HTML/CSS is to access our project page!
We’re thrilled to announce an exciting opportunity for you to win not one but two…
Acquiring practical skills is crucial for career advancement and personal growth. Education Ecosystem stands out…
Artificial Intelligence (AI) has been making significant strides in various industries, and the software development…
Another week to bring you the top yield platforms for three of the most prominent…
If you hold a large volume of LEDU tokens above 1 million units and wish…
It’s another week and like always we have to explore the top yield platforms for…
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!