In this post, we will learn how to align text vertically center in a div container using CSS. Sometimes we want to align text vertically center in a div container. In this post I will tell you a simple trick to align text vertically center. With the help of this trick, you will be able to align text vertically center with just one line of CSS code. 


How To Align Text Vertically Center In A DIV Container Using CSS ?


Align Text Vertically Center In A DIV Container

To align text vertically center we use line-height CSS property. With the help of this property we can easily align text vertically center. Whichever div's text we have to align vertically center, we have to keep the line-height value equal to the height value of that div. For example, if the height of the div is 20px, then we also have to keep the line-height value 20px.

<!DOCTYPE html>
<html>
<head>
<title>How To Align Text Vertically Center In A DIV Container Using CSS ?</title>
<style>
div{
height: 50px;
line-height: 50px
border: 2px solid #000;
}
</style>
</head>
<body>
<div>
<span>CodexRadar.com</span>
</div>
</body>
</html> code-box


Summary

In this post we learned how to align text vertically center in a div container using CSS. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.

Post a Comment

Previous Post Next Post