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

6 years ago from Viktor T, Visual Designer

  • Julian LloydJulian Lloyd, 6 years ago (edited 6 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, 6 years ago

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

      0 points
      • Cihad TurhanCihad Turhan, 6 years ago

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

        0 points