DEV Community

Cover image for CSS property vertical-align doesn’t work
Sara Ounissi
Sara Ounissi

Posted on • Originally published at thetrendycoder.com

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Discussion (7)

Collapse
guillaume profile image
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.
Enter fullscreen mode Exit fullscreen mode
Collapse
alohci profile image
Nicholas Stimpson • Edited on

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)

Collapse
thetrendycoder profile image
Sara Ounissi Author

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

Collapse
deathshadow60 profile image
deathshadow60

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

Collapse
thetrendycoder profile image
Sara Ounissi Author

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.

Collapse
deathshadow60 profile image
deathshadow60

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

Thread Thread
thetrendycoder profile image
Sara Ounissi Author

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.