为什么用 <a> 标签包装图像会改变图像的样式？

Question

我在 flexbox 中有一排图像，内容居中对齐，项目居中对齐；即内容应垂直和水平居中。

一切看起来都很棒，直到我去将这些图像包装在标签中以使其可以点击。这样做会改变样式，将图像提高几个像素，这意味着它不再垂直居中。

在下面的图片中，我在图片后面放置了彩色 div 以便于查看：

This is how it looks with all the images wrapped in links

This is how it looks with 2 images (UK and France) "unwrapped" from links

如您所见，英国和法国在未包裹在标签中时将其标记为垂直居中，而其他国家则没有。我唯一的 CSS 标签是：

a {
    text-decoration: none;
    color: #000000;
}

我觉得很标准？我的 HTML 包裹在 link 中的图像如下。（lang_container_desktop 是彩色的 div，header_links 是包含图像的 flexbox）：

<div class="header_links">
    <div class="lang_container_desktop">
        <a href="operation.php?op=changelang&lang=nederlands">
            <img src="assets/nederland.png" alt="Nederlands" style="width: 2vh; height: 2vh;">
        </a>            
    </div>
</div>

CSS 对于 flexbox:

.header_links {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 1vw;
    padding-right: 1vw;
    height: 4vh;
    width: auto;
}

仅供参考，是的，当图像不在彩色 div :)

中时，问题仍然存在

提前感谢任何能给我指出正确方向的人！

Answer 1

在@shutupchigo 的正确指导下，我在样式表中试验了我的标签，它现在可以正常工作了。

我将 flexbox 中的相同 flexbox 属性添加到标记中，现在所有内容都垂直居中了。我在下面添加了 CSS 代码。希望这个解决方案可以帮助将来的人！

a {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #000000;
}

为什么用 <a> 标签包装图像会改变图像的样式？

Why does wrapping an image in an <a> tag change the styling of the image?

html

css

image

hyperlink

styling