vertical-align text in CSS
Question
I have some really basic HTML & CSS:
header { vertical-align: middle; height: 60px; background-color: #00F; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" media="all" href="stylesheet.css"> <title>Hello, World!</title> </head> <body> <header> Hello<sup>World</sup> </header> </body> </html>
But the text doesn't get aligned in the middle. Why not?
8 answers
solution1
65 ACCPTED 2011-03-26 12:18:02
The vertical-align property only applies to:
inline-level and 'table-cell' elements
See this link .
You could use line-height to vertically center the text, just make it bigger than the actual font-size , however it is only effective if the text spans a single line.
Alternatively you could add padding to the top and bottom of the header element by equal values.
Edited as per comment: the obvious solution if using HTML5 header element would be to make it display: table-cell; instead of the default block which I think the reset CSS's apply.
solution2
24 2015-07-23 18:47:45
Flexbox can do this pretty easily now:
header {
display: flex;
align-items: center;
justify-content: center;;
}
solution3
11 2013-09-23 18:06:56
Try this, work very well for me:
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
solution4
5 2015-07-23 18:50:21
Here's my favorite trick for vertical aligning things it uses flex box, everything should use flex box!
header { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; border: black solid 0.1rem; height: 200px; <!--Insert any height --> }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" media="all" href="stylesheet.css"> <title>Hello, World!</title> </head> <body> <header> Hello<sup>World</sup> </header> </body> </html>
solution5
3 2011-03-26 12:13:53
The vertical-align attribute is for inline elements only. It will have no effect on block level elements, like a div or a paragraph.If you would like to vertically align an inline element to the middle just use this.
vertical-align: middle;
Check out more here : Understanding vertical-align, or "How (Not) To Vertically Center Content"
solution6
3 2011-03-26 12:15:18
vertical-align doesn't work the way you think it does in elements with display:block . People usually just use, for example, line-height:60px if the text is the only thing in the element and all stays on the same line.
If more stuff is going in there, it's probably better to give the container a height if you absolutely must and tweak the margin/padding/etc. of elements inside the containing element until it looks right.
solution7
0 2012-05-05 18:45:07
If you don't want to use a table you can use vertical-align:middle and display:inline-block while using an empty inline element with 100% height:
<!DOCTYPE><html><body> <!-- Author: brillout.com -->
<div style='height: 300px;border: 1px solid black;text-align:center'>
<div class='i'>vertical-align + inline-block<br>trick<br>in action</div>
<div class='i' style='height:100%;width:0px'></div>
</div>
<style> div.i{ display: inline-block; vertical-align: middle } </style>
</body></html>
solution8
0 2014-08-15 14:09:28
<div style="border:1px solid #000;height:200px;position: relative;">
<div style="position: absolute;top: 50%;left:50%;">
hello mahesh
</div>
</div>
Try this.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.