In this article, we will learn how to align the text vertically using CSS & Although CSS2 doesn’t support Vertical aligning. But, we can align the center blocks vertically, by combining a few properties. The trick is to specify the outer block to be formatted as a table cell because the contents of a table cell can be centered vertically. We will use the vertical-align property that specifies the vertical alignment of the table-box or inline element.
Syntax:
DIV.container {
min-height: 10em;
display: table-cell;
vertical-align: middle }
...
DIV {
GeeksforGeeks
}Example: This example describes the use of the vertical-align property along with the display property as table-cell.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Horizontal and Vertical alignment</title>
<style>
div {
height: 200px;
width: 400px;
border: 2px dashed #4b2869;
}
.container {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="container">GeeksforGeeks</div>
</body>
</html>
|
Output:
There is a more versatile approach to align text vertically.It will work for a single line as well as multiple lines of text, but it will still require a fixed height container.
Syntax:
div {
height: 200px;
line-height: 200px;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}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.
Example: This example describes aligning the content vertically with a fixed height of the container.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Horizontal and Vertical alignment </title>
<style>
div {
height: 200px;
line-height: 200px;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
</style>
</head>
<body>
<div>
<span>GeeksforGeeks</span>
</div>
</body>
</html>
|
Output:
CSS is the foundation of web pages, is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.