Вертикально выровненное по центру изображение ближе к нижней части, чем к верхней - PullRequest
Новая
       7

Вертикально выровненное по центру изображение ближе к нижней части, чем к верхней

0 голосов
/ 25 июня 2018

Почему в этом примере изображение не отображается точно в середине окружающего DIV? 

div {
  border: 1px solid gray;
  line-height: 100px;
}

img {
  height: 96px;
  vertical-align: middle;
}
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Russula_emetica_117475.jpg"> Foo
</div>

Если мы запустим этот пример, мы увидим, что изображение ближе к нижней границе, чем к верхней границе.

Почему это происходит?

Как правильно выровнять изображение в DIV по вертикали, чтобы оно находилось точно в середине DIV по вертикали?

Ответы [ 4 ]

0 голосов
/ 25 июня 2018

чтобы элемент находился там, где он требуется, ему нужно указать его 

img {
  height: 96px;
  width: 120px;
  margin-left: calc(50% - 60px);
  vertical-align: middle;
}
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Russula_emetica_117475.jpg"> Foo
</div>
0 голосов
/ 25 июня 2018

Как правильно выровнять изображение по вертикали в DIV?

вы можете сделать это с vertical-align: middle;

div {
  border: 1px solid gray;
}

img {
  height: 96px;
  vertical-align: middle;
}
<div>
  <img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Russula_emetica_117475.jpg" />
  <span class="caption">Foo</span>
</div>

или вы можете использовать flexbox 

div {
  border: 1px solid gray;
  display:flex;
  align-items:center;
}

img {
  height: 96px;
}
<div>
  <img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Russula_emetica_117475.jpg" />
  <span class="caption">Foo</span>
</div>
0 голосов
/ 25 июня 2018

Если мы проверим документацию, мы прочтем это:

middle

Выравнивает середину элемента с базовым значением плюс половина x-height родителя.

Таким образом, нам нужно определить эти значения, чтобы понять выравнивание.Если мы ссылаемся на приведенный выше рисунок , мы можем четко видеть базовую линию, а также высоту строки (в нашем случае она равна 100px).Также можно заметить, что середина - это не середина элемента div, а середина текста, определяемая различными значениями (font-family, font-size и т. Д.).

Чтобы использовать простые слова: ваша ссылка на выравнивание - это не div, а текст внутри div.

Чтобы упростить задачу, оставьте line-height со значением по умолчанию и определите вместо него font-size (высота строки будет тогда равна размеру шрифта): 

div {
  border: 1px solid gray;
  font-size:50px;
}

img {
  height: 46px;
  vertical-align: middle;
}
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Russula_emetica_117475.jpg"> Foo
</div>
with a different font-family
<div style="font-family:arial">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Russula_emetica_117475.jpg"> Foo
</div>

Вы можете ясно видеть, что middle находится далеко от середины div, и если мы изменим font-family, выравнивание также изменится.

Для выравнивания содержимого внутри div, содержащего текст, лучше использовать flexbox, например: 

div {
  border: 1px solid gray;
  font-size:50px;
  display:flex;
  align-items:center;
}

img {
  height: 46px;
}
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Russula_emetica_117475.jpg"> Foo
</div>
0 голосов
/ 25 июня 2018

Вы можете просто добавить одинаковые отступы в верхней и нижней части div. Это поможет вам выровнять изображение по центру. Есть также много других способов выравнивания по центру элементов. Пожалуйста, просмотрите статью https://vanseodesign.com/css/vertical-centering/

div {
  border: 1px solid gray;
  padding: 20px 0;
}

img {
  height: 96px;
}
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Russula_emetica_117475.jpg"> Foo
</div>
...