为什么当我向它添加显示 flex 时项目垂直居中？

Question

复制错误：

1. 调整浏览器宽度，以便您可以看到“ALDO”徽标

2. 取消注释这1行代码

   .logobox {
        /* display:flex; */
    }
   

3. “ALDO”徽标变为垂直居中。

4. 当我添加 flex 显示时，为什么徽标是垂直居中的？如果我添加一个对齐中心或对齐中心，这不应该只发生吗？是什么导致了这个错误？

我的代码：https://jsfiddle.net/q9n3p5wd/

我在 jsfiddle 中发布了我的 HTML 和 CSS，因为我的代码超过了 stackoverflow 帖子中允许的字符数

Answer 1

“Aldo”标志是一个图像文件。一般来说，无论是img还是svg元素，图片都默认设置为display: inline。

默认情况下，内联级元素也设置为vertical-align: baseline。此设置使图像从基线（文本所在的行）略微升高。这个额外的空间是为了容纳“descenders”而创建的，它适用于文本，而不是图像，但display: inline 并没有做出这种区分。

当您从display: inline 切换到display: flex 时，图像会自动设置为display: flex，这会将它们呈现为块级元素。此类元素未设置为vertical-align: baseline。

在您的代码中，这会导致图像向下移动到下行空间。

更多细节在这里：

• Mystery white space underneath image tag
• Why is my textarea higher up than its neighbor?
• Span element with display: inline-flex has greater height than sibling span