CSS property vertical-align doesn’t work

I was trying to apply the CSS property vertical-align: middle on an element but no luck, it was not working as expected.

Here is an example of non-functioning code :

.container {
  background-color: red;
  height: 50px;
  width: 100px;
}

.text {
  vertical-align: middle;
}

The first option would be to set a line-height on the element you want to center vertically :

.container {
  background-color: red;
  height: 50px;
  width: 100px;
}

.text {
  vertical-align: middle;
  line-height: 50px;
}

The second option would be to use display table on the parent .container, and display table-cell on the element you want to center vertically :

.container {
  background-color: pink;
  height: 50px;
  width: 100px;
  display: table;
}

.text {
  vertical-align: middle;
  display: table-cell;
}

Comments

[Stawarz guillaume]

You can't tell if it works or not only with css...
If you look at the documentation, you'll find there's an html context to use vertical-align

The vertical-align property can be used in two contexts:

    To vertically align an inline element's box inside its containing line box. For example, it could be used to vertically position an image in a line of text.
    To vertically align the content of a cell in a table.

Note that vertical-align only applies to inline, inline-block and table-cell elements: you can't use it to vertically align block-level elements.

[Nicholas Stimpson]

Vertical-align applies to all inline-level elements, not just inline and inline-block. So it also applies to elements that are inline-table, inline-flex, and inline-grid. (Plus inline list-item in Firefox)

[Sara Ounissi]

Thanks a lot for the precision, I didn't know about that.

[deathshadow60]

This is 2021, not 2005. Use display:flex; align-items:center; justify-content:center;

[Sara Ounissi]

I use flex most of the time, it's so easy and simple. However, I was in a situation where we were recommended not to use it because we were injecting code on exciting websites.

[deathshadow60]

"Injecting code on exciting websites"?!? What in the blazes does that even mean?

[Sara Ounissi]

I don't know if I'm using to correct words, I'm not a native English speaker.

We had a special format of ads to display on our publishers sites. So we needed do add some basic CSS and JavaScript to avoid any conflict between the ad and the shape of the website.