CSS箭头与同行文字垂直不对齐，父元素align-items:center设置无效如何解决

问题根因 #

• transform属性重复声明：.arrow类中先写了transform: translateY(50%);，后续又单独声明了transform: rotate(-45deg);，后者直接覆盖了前者的垂直偏移逻辑，导致预期的下移效果失效
• 内层容器未配置对齐规则：箭头和文字所在的共同父容器（.row1的第一个直接子div）没有设置flex布局，外层.row1的align-items: center只能控制.row1子级的整体对齐，无法处理子容器内部的箭头与文字的相对对齐
• 旋转元素的视觉偏移：用border绘制的箭头旋转后，视觉中心点和盒模型原始中心点存在偏差，仅靠vertical-align: middle无法匹配文字的实际基线位置

修复方案 #

1. 给箭头和文字的共同父容器添加flex布局，开启垂直居中对齐
2. 合并.arrow的transform属性，把偏移和旋转写在同一声明里，删除冗余的垂直对齐属性
3. 微调偏移量适配文字基线

修改后的完整CSS代码如下：

.accordian_wrapper{
    display: flex;
    width: auto;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 2px solid #e3e3e3e3;
    flex-direction: column;
}
.accordian_wrapper > div{
    display: flex;
    align-items: center;
    height: 40px;
    width: 50vw;
    padding: 0 10px;
    border-bottom: 1px solid black;
    justify-content: space-between;
    margin: 0 10px;
    box-sizing: border-box;
}
/* 新增：箭头和文字的父容器配置flex对齐 */
.accordian_wrapper > div > div:first-child {
    display: flex;
    align-items: center;
}
.arrow{
    border: solid rgb(37, 36, 36);
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 3px;
    /* 合并transform属性，可根据实际字体大小微调translateY的数值 */
    transform: translateY(1px) rotate(-45deg);
    -webkit-transform: translateY(1px) rotate(-45deg);
    margin-right: 10px;
}

修改后箭头会和文字精准垂直居中对齐，如需适配不同字号或箭头大小，只需微调translateY的数值即可。

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