Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • DigitalOcean
  • DO Community
Search

Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Vertical Align behaving strangely across browsers.

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • April 23, 2013 at 7:44 am #44312
    sanjaypoyzer
    Member

    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:





    test



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

    April 23, 2013 at 7:54 am #132833
    Paulie_D
    Member

    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.

    April 23, 2013 at 7:59 am #132834
    CrocoDillon
    Participant

    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.

    April 23, 2013 at 8:03 am #132837
    sanjaypoyzer
    Member

    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.

    April 23, 2013 at 8:04 am #132838
    Paulie_D
    Member

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

    April 23, 2013 at 8:06 am #132840
    sanjaypoyzer
    Member

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

    Thanks so much!

    What a bizarre little quirk…

    April 23, 2013 at 8:06 am #132841
    Paulie_D
    Member

    >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/

    April 23, 2013 at 8:06 am #132843
    sanjaypoyzer
    Member

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

    Thanks so much!

    What a bizarre little quirk…

    April 23, 2013 at 8:07 am #132844
    pixelgrid
    Participant

    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

    April 23, 2013 at 8:10 am #132845
    CrocoDillon
    Participant

    > 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
Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘CSS’ is closed to new topics and replies.

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • DigitalOcean
  • DigitalOcean Community
  • About DigitalOcean
  • Legal
  • Free Credit Offer
CSS-Tricks
  • Email
  • Guest Writing
  • Book
  • Advertising
Follow
  • Mastodon
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • iTunes
  • RSS
Back to Top