如何让右侧inline flex无序列表与大标题文本垂直居中对齐？

你的问题核心在于两点：一是flex容器nav没设置垂直对齐规则，二是浏览器默认给ul加了外边距，导致右侧列表位置偏移。不用padding的话，用flex自带的属性就能简洁解决：

1. 给nav添加align-items: center，让子元素在垂直方向上居中对齐
2. 重置nav ul的默认外边距，消除浏览器自带样式的干扰

修改后的完整CSS代码如下：

.site-title {
  font-size: 26pt;
  font-weight: bold;
  text-decoration: none;
}

.site-title:hover {
  text-decoration: underline;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center; /* 新增：垂直居中子元素 */
}

nav ul {
  list-style-type: none;
  margin: 0; /* 新增：清除ul默认外边距 */
  padding: 0; /* 可选：清除ul默认内边距 */
}

nav ul li {
  display: inline-flex;
  margin-left: 16px; /* 可选：给右侧列表项添加间距优化视觉 */
}

/* 演示用边框 */
nav {
  border: 2px dashed red;
}

对应的HTML保持不变即可，这样右侧的About、Posts列表就会和左侧大标题垂直居中对齐，完全不需要手动设置padding。

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