如何让Logo与导航栏垂直居中对齐？（响应式设计场景）

方案一：使用Flexbox布局（推荐） #

Flexbox是现代响应式布局的首选方案，能轻松实现元素垂直居中，代码简洁且适配性强：

1. 给包含Logo和导航的父容器添加Flex属性：

/* 请根据你的实际HTML结构替换父容器类名，比如.nav-container */
.nav-container {
  display: flex;
  align-items: center; /* 核心属性：让子元素垂直居中 */
}

2. 调整Logo和导航的样式，移除float属性：

.netflix-logo {
  margin-right: 18px;
  /* 删除原有的float:left */
}

nav a {
  color: white;
  margin: 0 8px; /* 移除原有的margin-top，避免垂直偏移 */
  text-decoration: none;
}

方案二：传统inline-block + vertical-align方案 #

如果需要兼容旧浏览器，可以采用这种方法：

.netflix-logo {
  display: inline-block;
  vertical-align: middle; /* 与导航元素对齐 */
  margin-right: 18px;
  /* 删除原有的float:left */
}

nav a {
  display: inline-block;
  vertical-align: middle; /* 和Logo保持垂直居中 */
  color: white;
  margin: 0 8px;
  text-decoration: none;
}

原方法无效的原因 #

你之前用float:left让Logo脱离了正常文档流，而导航内的<a>元素是inline状态，vertical-align:middle仅对同一文档流内的inline/inline-block元素生效，float元素不在这个行内上下文里，因此无法实现居中效果。

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