纯CSS实现头部header元素水平垂直对齐相关问题咨询

问题1解答 #

vertical-align 仅对行内级元素（inline、inline-block类型）生效，作用是定义当前元素在它所属的「行框（line box）」中的垂直对齐规则。
你的代码中.logo和nav都设置了display: inline-block，属于同一个行框内的同级元素：

• 你给.logo设置了vertical-align: middle，代表.logo盒子的垂直中点需要和当前行框的「基线 + 小写x字母高度的1/2」位置对齐
• nav没有单独设置vertical-align，使用默认值baseline，也就是nav盒子的基线要和当前行框的基线对齐
• 由于.logo包含100px高的图片，高度更高，它直接撑高了整个行框的高度，同时把行框的基线位置调整到刚好满足.logo垂直居中的位置，所以nav按默认基线对齐后，视觉上就和.logo里的文字呈现对齐效果。

问题2解答 #

你可以用CSS基础的定位规则实现需求，不需要用到float也不需要Flex，修改成本极低：

1. 先给header添加相对定位属性，作为导航的定位父级：

header {
  background-color: #D5D4D4;
  position: relative; /* 新增 */
}

2. 给nav添加绝对定位和垂直偏移规则，实现右对齐+垂直居中：

header nav {
  border: 3px solid red;
  display: inline-block;
  /* 新增以下规则 */
  position: absolute;
  right: 10px; /* 可自定义，和左侧logo的左右边距保持视觉统一即可 */
  top: 50%;
  transform: translateY(-50%);
}

这个方案不会触发float带来的vertical-align失效问题，也完全符合CSS基础原理，导航会永远和左侧内容垂直居中对齐。

内容的提问来源于stack exchange，提问作者danizgod