4
lulebe
7y

To all who use CSS:
Do you vertically align using flexbox or some weird old hacky method? I just used flexbox throughout a personal project to find out it doesn't work on my mom's computer...
Sorry if this question is too serious for this, but it really bothers me :D

Comments
  • 5
    Just don't use vertical centering at all 😀

    But if you have to, use one of the many arcane hacks
  • 1
    @Huuugo I wish I could. But sometimes some images have to align with the text next to them etc. It just looks shit otherwise.
  • 1
    @lulebe aligning with text is rather done with floating and setting the right margins. Did I miss something?
  • 2
    @hube that goes as hack
  • 5
    i use flexbox, fsck old browsers
  • 1
    I need to support old browsers. My company's designers and I are very good friends, so I tell them the cost of vertical centering across browsers and they avoid it unless they deem it worth the cost.
  • 0
    Use flexbox.
    http://caniuse.com/#feat=flexbox

    If someone is using a browser older than IE11, even Microsoft doesn't support it.
  • 1
    Transform: translate ftw
  • 1
    You can use vertical-align:center; if you know the exact height of the outer container or the translate method otherwise.
    I know you will say these are hacks, but they are the builting ways to achieve this... And they work flawlessly.

    .outer{
    height: 500px;
    line-height: 500px;
    }
    .vcenter{
    display: inline-block;
    line-height: 1em;
    vertical-align: middle;
    }

    Or:
    .outer{
    position: relative;
    }
    .vcenter{
    position: absolute;
    top: 50%;
    transform: translate( 0, -50% );
    }
  • 1
    There are (fairly) simple arcane hacks to do this.
    Look up the "phantom" :before method. That one is my "favorite" ...
  • 0
    @Ashkin can you explain that one? Didn't find anything useful on Google for "phantom before vertical align"
  • 1
    @lulebe Oof, it's been awhile, and it's pretty arcane... Let me see If I can find it again.

    Ahhh, it's not "phantom," it's "ghost"!
    Here's the link: https://css-tricks.com/centering-in...

    ------
    Edit: my earlier "favorite" was (mostly) sarcasm.
Add Comment