↵

Vertical align anything with just 3 lines of CSS(zerosixthree.se)

over 9 years ago from Viktor T, Visual Designer

  • Lucas MottaLucas Motta, over 9 years ago

    Hey Julian,

    The problem is not specifically on the fonts, but in the rest. If the child has an odd height, all its elements will be blurred. Again, the fonts are not the issue because it's a different kind of rendering. Take a look at this example and notice the border above the text on the second item: http://codepen.io/lucasmotta/pen/hBcEw

    I've been through that in the past and, trust me, it's not worth the fight.

    2 points
    • Julian LloydJulian Lloyd, over 9 years ago (edited over 9 years ago )

      Interesting, thanks for sharing this.

      So text and images render fine, but borders get destroyed. Do you know what else doesn’t play nice?

      Edit: I removed the border and changed the background color of the children, and its top edge is also blurred. I bet pseudo elements get blurred too. I’m curious about SVG…

      0 points
      • Lucas MottaLucas Motta, over 9 years ago

        I just updated my pen to show what happens with SVGs – unfortunately they also get blurred :(

        0 points
        • Cihad TurhanCihad Turhan, over 9 years ago

          It's normal. Browser converts everything (except fonts, under some conditions) to raster images so anything will be blurred.

          0 points