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

#css #bug #beginners #programming

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

Top comments (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

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 •

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 •

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 •

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.

Read next

techpulse55 profile image

Unlocking Tube Magic AI’s Potential: Features, Pricing, and Performance Review

Techpulse -

techpulse55 profile image

Unlocking Quickpix AI's Potential: Features, Pricing, and Performance Review

Techpulse -

it_vturbo profile image

Why Atomic Design Is Not for Frontend: A Deep Dive

Valentin Turbins -

forthegeeks profile image

Understanding Vue.js Slots: A Toddler Analogy

Manjunath Shenoy -