如何解决header内图片与文本同行时文本无法垂直居中问题

导航停靠在容器底部是两个核心问题导致的：

• 导航链接类.headTxt设置了margin-bottom: 50px，直接将整个导航模块向下挤压偏移
• 父容器.header没有配置统一的对齐规则，仅靠display: inline-block和已废弃的HTML属性align="center"，无法控制行内块元素的垂直位置；行内块元素默认的基线对齐规则，也会加重元素错位问题

用Flex布局实现头部排列和居中，写法稳定不会出现对齐偏差，按以下步骤修改即可：

1. 给.header容器添加Flex布局属性，实现子元素横向排列、水平+垂直双居中
2. 删除.headTxt上多余的margin-bottom: 50px属性
3. 移除HTML中老旧的align="center"属性，所有对齐逻辑交给CSS控制
4. 把过渡属性transition移到元素默认状态下，避免鼠标移出时效果跳变

修复后完整CSS代码 #

body {
    direction: rtl;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.header {
    background-color: rgb(209, 45, 33);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px 0;
}

.icon {
    width: 150px;
    padding-left: 10px;
    transition: 0.5s;
}
.icon:hover {
    width: 170px;
}

.headTxt {
    font-weight: bold;
    font-size: 35px;
    color: rgb(234, 234, 234);
    padding: 10px;
    transition: 0.5s;
}
.headTxt:link {
    text-decoration: none;
}
.headTxt:hover {
    color: black;
    font-size: 40px;
}

修复后HTML代码 #

<div class="header">
    <a href="index.html">
        <img src="pics/icon.png" class="icon">
    </a>
    <div>
        <a href="index.html" class="headTxt">
            בית
        </a>
        <a href="" class="headTxt">
            היציע המזרחי
        </a>
        <a href="" class="headTxt">
            חברות
        </a>
        <a href="" class="headTxt">
            תמונות
        </a>
        <a href="" class="headTxt">
            צור קשר
        </a>
    </div>
</div>

修改完成后，图标和所有导航链接会处于同一行，所有元素在header容器内垂直居中，hover时的大小变化也会有平滑的双向过渡效果。

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