Vertical Align behaving strangely across browsers.

[sanjaypoyzer]

So I’m trying to vertically center an image for portrait viewports first.

My code is behaving strangely though so I’ve stripped it down to it’s bare basics. It’s working strangely in that there doesn’t seem to be consistency across browsers:

It works as expected in Opera and Safari (vertically aligns) but does not work in Firefox. (IMG is pushed outside of viewport) In Chrome it only works when the file is remote.

Very confused about why this would be as I’m not using any server-side languages, it’s literally been stripped down to the following HTML/CSS:

Any help on what’s causing this confusing bug is greatly appreciated.

[Paulie_D]

I suspect it’s something to do with the absolutely positioned container.

You are missing a closing semi-colon on the height property in `#container img` though.

[CrocoDillon]

I don’t know why, but adding `font-size: 0;` to `#container` seems to fix it in FF. This http://www.codepen.io/Merri/pen/cdgza pointed me in that direction.

[sanjaypoyzer]

Added the semicolon, no difference.

What do you suggest doing with the absolutely positioned container? It’s there so nothing goes out of the viewport and did have overflow:hidden but I removed that for easier debugging.

[Paulie_D]

@CrocoDillon That’s possibly the “whitespace” issue with `inline-block`.

[sanjaypoyzer]

Wow, CrocoDillon. That solution totally worked. Fixed it locally in Chrome as well.

Thanks so much!

What a bizarre little quirk…

[Paulie_D]

>What do you suggest doing with the absolutely positioned container?

I’m just wondering what it’s for.

https://css-tricks.com/centering-in-the-unknown/

[sanjaypoyzer]

Wow, CrocoDillon. That solution totally worked. Fixed it locally in Chrome as well.

Thanks so much!

What a bizarre little quirk…

[pixelgrid]

vertical align is used only with table cell display i think .For text i just use the same line height as the containers height

display:table-cell;
vertical-align:middle;

works too

[CrocoDillon]

> That’s possibly the “whitespace” issue with inline-block.

Seems like you’re right. Without `font-size: 0`, removing all the whitespace between elements works as well.

[Author]

Posts