0

The problem example can be seen here http://codepen.io/anon/pen/EDgiz.

As you can see, a square(1:1) proportion element is positioned perfectly fine. But two others - not.

Is there a pure CSS solution for such cases?

If not, what can you propose as gentle solution? Because I actually can position those with javascript manually, but i think that's more or less - dirty solution.

Kamilius
  • 588
  • 14
  • 34

1 Answers1

2

Just found a very delicate solution here: http://www.paulund.co.uk/absolute-center-images-with-css, using transform: translate() function

So my final example looks like this - http://codepen.io/anon/pen/EDgiz:

img{
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

Works Awesome for me

Janak
  • 4,986
  • 4
  • 27
  • 45
Kamilius
  • 588
  • 14
  • 34
  • 1
    This won't work in IE 8 but it does look nice, don't forget the other vendor prefixes. – web-tiki Apr 29 '14 at 08:35
  • Just checked this http://caniuse.com/transforms2d, and it seems, like now i don't need another prefixes + i need support only for IE10+, so that suits my purposes pretty well. Maybe i shall add -ms- tag too, for IE9 support just in case. – Kamilius Apr 29 '14 at 08:39