vertical-align text in CSS

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

Answer Checked By – Dawn Plyler (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.