This is a memo on what to do when the top and bottom margins of the image do not match even though the vertical position is centered with “display:flex” + “align-items:center;”
Please note that this is a complete style memo, so there may be errors depending on the case.
“display:flex;” is often used when you want to arrange elements horizontally in HTML like the one below.
<div class="pwcn-parent">
<div class="child-a">
<img src=""....>
</div>
<div class="child-b">
<p>Text</p>
</div>
</div>
If you want to align the vertical position to the center, specifically write it like this.
.pwcn-parent {
/* display: flex; */
display: flex;
align-items: center;
justify-content: left;
border: 1px solid #000;
padding: 8px;
background:#000;
color:#fff;
}
Below is a display sample with the above HTML and style code added.
abcdefg
….I intentionally made the background black, but do you notice that there is a slight difference between the black parts at the top and bottom of the image?
Well, about this. .. That’s what I want to say, but if you want to fix it anyway, if you have the above structure, you can solve it by adding the following style code.
.child-a img {
display: block;
margin: auto 0;/* This may not be necessary */
}
By the way, the following is what I added (class names have been changed so you can see the difference).
abcdefg
Hmm, that feels good.
The above is an example of what to do when the gap between the top and bottom of the image is not centered when using display:flex;.