Why can't text be centered vertically?

W

webrapist2016-04-05 23:52:22

css

webrapist, 2016-04-05 23:52:22

Good evening.
HTML:

<body>
  <div class="header">
      London
      Paris
      Tokyo
  </div>
...

CSS:

.header {
      height: 70px;
      background-color: #181818;
      color: white;
      text-align: center;
      vertical-align: middle;
      padding: 5px;
    }

Vertically, I can set the position of the text, but not vertically. Why?
It is necessary that the text in the header be located in the middle vertically, but for some reason it does not lend itself.
And then the question is: do I need to insert another div with the nav class into the header, or is it superfluous?

Reply

Answer the question

In order to leave comments, you need to log in

4 answer(s)

D

Dmitry, 2016-04-06
@swibong

use flex, no perversions with vertical-align and line-height will help for multi-line text.

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

A

Alexey, 2016-04-06
@alsopub

The vertical-align property only works on inline elements or inline boxes and table cells. When applied to non-table cells, it affects the element itself, not its contents.

web-standards.ru/articles/vertical-align

O

ommunist, 2016-04-13
@ommunist

the parent element must have position:relative; if the child element is centered with position:absolute
In general there are 6 methods

G

glamurchik, 2016-04-06
@glamurchik

height: 70px
what is vertical here?