vertical-align text in CSS
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>
<开发者_JAVA百科/header>
</body>
</html>But the text doesn't get aligned in the middle. Why not?
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.
Flexbox can do this pretty easily now:
header {
display: flex;
align-items: center;
justify-content: center;;
}
http://codepen.io/anon/pen/waYBjv
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;
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>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"
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.
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:
http://jsfiddle.net/ycugZ/
<!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>
<div style="border:1px solid #000;height:200px;position: relative;">
<div style="position: absolute;top: 50%;left:50%;">
hello mahesh
</div>
</div>
Fiddle demo
Try this.
加载中,请稍侯......
精彩评论