Issue
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?
Solution
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.
Answered By - clairesuzy
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.