Vertically middle-aligned image is closer to the bottom than the top - html

Question

Why is the image not rendered exactly in the middle of the enclosing DIV in this example?
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>
If we run this example, we see that the image is closer to the bottom border than the top border.
Why does this happen?
What is the right way to vertically align an image in a DIV so that it is exactly in the middle of the DIV vertically?

Answer 1

If we check the documentation we will read this:
middle
Aligns the middle of the element with the baseline plus half the x-height of the parent.
So we need to identify these values in order to understand the alignement. If we refer to the above figure we can clearly see the baseline and we can also see the line-height (defined by 100px in our case). You can aslo notice that the middle is not the middle of the div but the middle of the text defined by the different values (font-family, font-size, etc).
To use easy words: your reference of alignment is no the div but the text inside the div.
To make it easier let keep the line-height with the default value and define a font-size instead (the line-height will be then equal to the 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>
You can cleary see that the middle is far from the middle of the div and if we change the font-family the alignment will also change.
In order to align content inside a div that contain text better rely on flexbox for example:
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>

Answer 2

that the element would be where it is required, he needs to specify it
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>

Answer 3

You could just add equal padding on the top and bottom of the div. This helps you to align the image in the center. There are also many other ways to center align items.
Please go through the article 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>

Answer 4

What is the right way to vertically align an image in a DIV ?
you can do it with 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>
or you can use 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>