技术问询：如何将一张图片置于页面左边缘，另一张置于页面中央？

根据你提供的代码，我整理了两种常见的布局实现方式，对应不同的示例样式需求：

场景1：菜单图标靠左，Logo水平居中（不受菜单图标位置影响） #

这种布局下，Logo始终保持在页面顶部中间，菜单图标固定在左侧：

修改后的CSS #

.header {
    display: flex;
    align-items: flex-end; /* 让两张图片底部对齐 */
    position: relative;
    width: 100%; /* 确保容器占满父元素宽度 */
}

.header_menu {
    width: 30px;
    height: 30px;
}

.header_logo {
    width: 300px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* 实现水平居中 */
}

场景2：菜单图标靠左，Logo靠右（两端对齐） #

如果示例图是两张图片分别在容器的左右两端，用以下CSS：

修改后的CSS #

.header {
    display: flex;
    justify-content: space-between; /* 两端对齐 */
    align-items: flex-end; /* 底部对齐 */
    width: 100%; /* 占满宽度才能实现两端对齐 */
}

.header_menu {
    width: 30px;
    height: 30px;
}

.header_logo {
    width: 300px;
}

代码优化说明 #

1. 移除了图片上不必要的display:flex设置，图片本身是行内块元素，无需额外声明flex
2. 用align-items: flex-end统一实现垂直底部对齐，替代原来冗余的vertical-align和重复的align-items设置
3. 针对不同布局需求，调整了容器的justify-content或使用绝对定位实现Logo居中

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