为何<span>元素无法垂直居中？CSS布局问题求解

你的#menu-join-button是<span>标签，属于行内元素，这就是问题的核心：行内元素的垂直margin和padding不会真正改变它的垂直布局位置（虽然padding会在视觉上显示，但不会推动其他元素，也无法让自身在容器中垂直居中），而且它和旁边的<img>（默认也是行内元素）会基于文本基线对齐，自然没法和图片一起在50px高的header里居中。

下面给你几种简单有效的解决方法，任选其一即可：

方法1：使用Flex布局（推荐，现代布局首选） #

Flex布局可以轻松实现容器内元素的垂直居中，只需要给包含img和span的父容器#header-right-icon-div添加以下样式：

#header-right-icon-div {
  display: flex;
  align-items: center; /* 垂直居中对齐子元素 */
  height: 50px; /* 和header高度保持一致，确保容器占满header的垂直空间 */
}

同时你可以去掉<img>上的上下padding（padding: 15px 10px 15px 10px改成padding: 0 10px），因为Flex已经帮你完成了垂直居中的工作，不需要靠padding来硬凑高度了。

方法2：将span改为行内块元素，配合垂直对齐 #

如果你不想用Flex，也可以把span转换成inline-block元素，然后让它和img一起基于中线对齐：

#menu-join-button {
  display: inline-block;
  vertical-align: middle;
}

/* 给img也加上垂直对齐，确保和span对齐 */
#header-right-icon-div > img {
  vertical-align: middle;
}

这样修改后，span就会和img的中线对齐，结合img原本的上下padding（15px+20px+15px=50px，刚好和header高度一致），就能实现垂直居中的效果。

方法3：利用line-height实现居中 #

因为header的高度是50px，你可以给父容器设置line-height等于容器高度，再让子元素垂直对齐：

#header-right-icon-div {
  line-height: 50px;
}

#menu-join-button,
#header-right-icon-div > img {
  vertical-align: middle;
}

这种方法需要注意：如果img的上下padding会导致元素总高度超过line-height，可能会出现溢出，所以可以适当调整img的padding值。

为什么原来的上下margin/padding无效？ #

行内元素的垂直margin不会影响布局空间，上下padding虽然会在视觉上显示，但不会改变元素的基线位置，也不会让父容器的高度发生变化（除非超出当前行的line-height），所以你设置上下margin/padding后，看起来完全没效果。

内容的提问来源于stack exchange，提问作者J. Doe