↵

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

over 9 years ago from Viktor T, Visual Designer

  • Cihad TurhanCihad Turhan, over 9 years ago (edited over 9 years ago )

    What if the height of the container is some odd number pixels?

    Let's say you have height: 145px and your translateY property will be like transform:translateY(72.5px) which means you're not pixel-perfect anymore. Your texts, icons, pictures will be all blurred.

    Use it if pixel perfection doesn't matter.

    PS: Table method is also 3 lines and it's cross browser already :)

    display: table; /* parent*/ display: table-cell; /*child */ vertical-align: middle; /*child */ ``
    9 points
    • ポール ウェッブポール ウェッブ, over 9 years ago

      This is also a good method, but if the parent or child has to have display set to something other than table/table-cell, the linked method is best.

      I sure am glad there are multiple ways to do the same thing.

      0 points
    • Surjith S MSurjith S M, over 9 years ago

      I'm also a fan of this method

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

      Let's say you have height: 145px and your translateY property will be like transform:translateY(72.5px) which means you're not pixel-perfect anymore. Your texts, icons, pictures will be all blurred.

      I decided to put this to the test. (In Chrome and Firefox.)

      Transform: translateY(–50%) actually translates –50% of the element height it’s declared on (ie. the child height), not the container/parent height.

      So I tested 2 screenshots:

      • 99x99px kitten without translateY
      • 99x99px kitten with translateY(–50%)

      I overlaid these screenshots and found the rendering to be identical. In other words, translateY(–50%) applied to a 99px image (odd pixel value for height) did not result in blurry rendering… as you suggested it should by the resulting (alleged) –49.5px translation.

      I also did a couple tests with text, but I noticed no blurring. (The only blurring seems to occur during CSS transitions.)

      Perhaps Chrome and Firefox are auto-rounding, but it seems we don’t needs to worry about "pixel perfection" using this technique (in Chrome/Firefox with images and text). I have not tested SVG or any other pertinent elements, or other browsers.

      Anyone want to continue the experiment? :)

      0 points
      • 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