Выравнивание изображения внутри DIV

11 января 2013

Вчера встала задача выровнять изображение внутри DIV по нижней границе и по центру. Естественно (хотя, по-моему, это совсем не естественно) vertical-align совсем не помог. И вот решение, по-моему очень неочевидное с выравниванием по центру, когда задаются left и right одновременно. Но, как ни странно, это работает (код SCSS):

div.container {
  position: relative;

  width: 100px;
  height: 100px;

  img {
    display: block;
    position: absolute;

    left: 0; right: 0; // выравнивание по центру
    bottom: 0;

    margin: auto;
  }
}