A common task for CSS is to center text or images vertically.
Although CSS2 doesn’t supports Vertical aligning . But we can center blocks vertically, by combining a few properties. The trick is to specify that the outer block is to be formatted as a table cell, because the contents of a table cell can be centered vertically.
The example below centers a paragraph inside a block that has a certain given height. A separate example shows a paragraph that is centered vertically in the browser window, because it is inside a block that is absolutely positioned and as tall as the window.
DIV.container { min-height: 10em; display: table-cell; vertical-align: middle } ... DIV { GeeksforGeeks }
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{
GeeksforGeeks
}
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.
leave a comment
0 Comments