html - 为什么当我向它添加显示 flex 时元素垂直居中？

Question

复制错误:

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

2. 取消注释这 1 行代码

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

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

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

Answer 1

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

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

当您从 display: inline 切换到 display: flex 时，图像会自动设置为 display: flex，这会将它们呈现为 block 级元素。此类元素未设置为 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