ryyst ryyst - 3 months ago 6x
HTML Question

CSS - vertical-align not working

I got some really basic HTML & CSS:

Here's the HTML:

<!DOCTYPE html>
<meta charset="UTF-8">
<link rel="stylesheet" media="all" href="stylesheet.css">
<title>Hello, World!</title>

Here's the CSS:

header {
vertical-align: middle;
height: 60px;
background-color: #00F;

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.