如何让两个Logo垂直居中且实现justify-content: space-between布局？

核心用Flexbox即可实现需求，以下是具体代码和关键说明：

HTML结构示例 #

<div class="logo-wrapper">
  <img src="你的Logo1地址" alt="左侧Logo" class="site-logo">
  <img src="你的Logo2地址" alt="右侧Logo" class="partner-logo">
</div>

CSS实现代码 #

.logo-wrapper {
  /* 启用Flex布局 */
  display: flex;
  /* 垂直方向居中对齐子元素 */
  align-items: center;
  /* 水平方向两端对齐，自动分配中间空白 */
  justify-content: space-between;
  /* 给容器设置高度，确保垂直居中效果可见（可根据需求调整） */
  height: 70px;
  /* 可选：添加内边距避免Logo紧贴容器边缘 */
  padding: 0 15px;
}

/* 统一Logo尺寸（可选，避免不同大小的Logo影响居中） */
.site-logo, .partner-logo {
  height: 45px;
  width: auto;
}

关键要点说明 #

• display: flex：将容器转为Flex布局，这是实现对齐的基础
• align-items: center：让两个Logo在垂直方向上居中对齐，无论Logo自身高度如何
• justify-content: space-between：强制两个Logo分别靠向容器的左右两端，中间的空白会自动填充
• 容器高度设置：必须给容器一个明确的高度（或由父元素继承高度），否则垂直居中的效果无法体现

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