How to align text vertically center in a DIV element using CSS?
How to align text vertically center in a DIV element using CSS?
By using the CSS property “line-height”
To align the text inside a div using the CSS rule vertical-align: middle; It won’t succeed.
Instead if you have a div element with the height of 50px and you have placed some link inside the div that you want align vertically center.
The best way to do it is — just apply the line-height property with value equal to the height of div which is 50px.
For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Align Text Vertically Center Using CSS</title>
<style type="text/css">
.menu{
height: 20px;
line-height: 20px;
padding: 15px;
border: 1px solid #666;
}
</style>
</head>
<body>
<div class="menu">
<a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">Contact</a>
</div>
</body>
</html>
div {
height: 90px;
line-height: 90px;
text-align: center;
border: 2px dashed #f69c55;
}<div>
Hello World!
</div>It only works for a single line of text though, because we set the line’s height to the same height as the containing box element.
A more versatile approach
This is another way to align text vertically. This solution will work for a single line and multiple lines of text, but it still requires a fixed height container:
div {
height: 200px;
line-height: 200px;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>The CSS just sizes the <div>, vertically center aligns the <span> by setting the <div>‘s line-height equal to its height, and makes the <span> an inline-block with vertical-align: middle. Then it sets the line-height back to normal for the <span>, so its contents will flow naturally inside the block.
Simulating table display
And here is another option, which may not work on older browsers that don’t support display: table and display: table-cell (basically just Internet Explorer 7). Using CSS we simulate table behavior (since tables support vertical alignment), and the HTML is the same as the second example:
div {
display: table;
height: 100px;
width: 100%;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: table-cell;
vertical-align: middle;
}<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
For horizontal centering, you could either add text-align: center to center the text and any other inline children elements. Alternatively, you could use margin: 0 auto assuming the element is block level.
html, body {
height: 100%;
}
.parent {
width: 100%;
height: 100%;
display: table;
text-align: center;
}
.parent > .child {
display: table-cell;
vertical-align: middle;
}
