CSS Header样式不符合预期，寻求logo与搜索栏居中并排布局方案

直接给你调整后的代码，核心用Flex布局就能实现你要的居中并排效果：

修改后的CSS代码 #

.header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  background-color: #f5f5f5; /* 可选，方便查看布局范围 */
}

.logo {
  width: 80px;
  height: 80px;
  background-image: url('../assets/images/logo.jpeg');
  background-size: cover;
  margin-right: 20px;
}

.search-bar {
  width: 500px; /* 可根据需求改为百分比，比如40% */
  height: 40px;
  border: 1px solid gray;
  border-radius: 20px;
  padding: 0 15px;
  font-size: 1em;
}

关键修改说明 #

• 给.header加Flex布局：display: flex是核心，配合align-items: center让元素垂直居中，justify-content: center实现整体水平居中，直接解决并排和居中的问题。
• 给.header设固定高度：避免父元素高度由子元素撑开导致布局混乱，同时让搜索栏的高度设置更可控。
• 调整搜索栏样式：去掉原有的margin: 0 auto（Flex布局下不需要这个），把百分比高度改成固定值，避免依赖父元素高度出现异常，同时调整内边距让输入区域更合理。

期望效果对照 #

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