Вертикально выровнять img внутри div?

css css3 sass

2881 просмотра

2 ответа

9838 Репутация автора

Кто-нибудь знает, что мне не хватает, чтобы вертикально выровнять img внутри div?

У меня есть немного sass (рабочие примеры css также с благодарностью приемлемы :-))

Я думал, что text-alignбыло достаточно? Но это не работает. Запас и высота автоматически устанавливаются, <img>чтобы G знал, что работает.

.testdiv {
  font-size: rem(12);
  height: 80px;
  img {
    margin-left: 12px;
    height: 16px;
    width: 16px;
    text-align: center;
  }
}

и немного HTML

<div class="testdiv">
    <img src="./test.png">
</div>

Есть идеи? Спасибо

Автор: Martin Источник Размещён: 18.07.2016 02:59

Ответы (2)


2 плюса

23934 Репутация автора

Вы можете использовать display: table-cellсвойство css для вертикального выравнивания элемента внутри родителя.

.testdiv {
  vertical-align: middle;
  display: table-cell;
  font-size: rem(12);
  text-align: center;
  background: black;
  height: 80px;
  width: 100px;
}

img {
  vertical-align: top;
  height: 16px;
  width: 16px;
}
<div class="testdiv">
  <img src="images/image.jpg" alt="Image Description">
</div>

Автор: Mohammad Usman Размещён: 18.07.2016 03:11

1 плюс

13062 Репутация автора

Решение

смотри здесь jsfiddle

text-align не имеет ничего общего с vertical-align

Есть несколько способов для vertical-alignпредметов, один из нихdisplay:flex

код:

.testdiv {
  font-size: rem(12);
  height: 80px;
  display:flex;
  align-items: center;
  justify-content: center;
  width:100px;
  height:100px;
  border:5px solid red;
      img {
        margin-left: 0px;
        height: 16px;
        width: 16px;
        text-align: center;
  }
}
Автор: Mihai T Размещён: 18.07.2016 03:25
Вопросы из категории :
32x32