为什么将图像包装在 <a> 标签中会改变图像的样式？答案

【问题标题】：Why does wrapping an image in an <a> tag change the styling of the image?为什么将图像包装在 <a> 标签中会改变图像的样式？
【发布时间】：2020-03-28 06:57:50
【问题描述】：

我在 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 如下所示。（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>

flexbox 的 CSS：

.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 中时，问题仍然存在 :)

提前感谢任何可以为我指明正确方向的人！

【问题讨论】：

请同时发布 CSS。
显示html css并使用实际图片
@shutupchigo 你能更具体地告诉我你想让我发布什么 CSS 吗？
@DCR 我无法发布实际图片（我是新手，需要一定数量的“声誉”才能发布内嵌图片。
@james 到目前为止您编写的 CSS 和 HTML。您可能不得不将 flex 属性添加到“a”标签。因为图像现在是该标签的子标签。

标签： html css image hyperlink styling

【解决方案1】：

在@shutupchigo 的推动下，我在样式表中尝试了我的标签，现在它正在工作。

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

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

【讨论】：