dio-v
7/30/2014 - 6:23 AM

vertical align Source: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ As a few people have pointed out, this meth

vertical align Source: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ As a few people have pointed out, this method can cause elements to be blurry due to the element being placed on a “half pixel”. A solution for this is to set its parent element to preserve-3d. Like following:

.parent-element { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; }

.element { position: relative; top: 50%; transform: translateY(-50%); }

vertical.less
content_copyfile_download
    .verticalAlign (@x: 50%) {
        position: relative;
        top: @x;
        -moz-transform: translateY(-@x);
        -ms-transform: translateY(-@x);
        -o-transform: translateY(-@x);
        -webkit-transform: translateY(-@x);
        transform: translateY(-@x);
    }
vertical.css
content_copyfile_download
.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}