CSS实现div内文本对齐：钢琴白键文字底部居中、黑键顶部居中

文本重叠的核心原因是现有样式没有给琴键元素设置内部内容排版规则，文本默认沿元素顶部排列，叠放的黑键文本会和相邻白键文本挤在一起，仅修改CSS即可实现要求效果，无需改动HTML结构（注意你代码里A#2的文本误写为A$2，可自行修正）。

调整后的完整CSS代码 #

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    background-color: #612718;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100vh; /* 补充规则让钢琴垂直居中效果生效 */
}

.piano {
    display: flex;
    margin: 0px auto;
    align-items: flex-start; /* 补充规则保证黑白键顶部对齐基准一致 */
}

.key {
    height: calc(var(--width) * 4);
    width: var(--width);
    color: black;
    font-size: 0.7vw; /* 适配视口的字号，避免小尺寸黑键文字溢出 */
    display: flex;
    justify-content: center;
}

.white {
    --width: 2.8vw;
    background-color: white;
    border: 1px solid #333;
    /* 白键文本靠底部对齐 */
    align-items: flex-end;
    padding-bottom: 10px;
}

.black {
    --width: 2vw;
    background-color: black;
    margin-left: calc(var(--width) / -2);
    margin-right: calc(var(--width) / -2);
    z-index: 2;
    color: white;
    /* 黑键文本靠顶部对齐 */
    align-items: flex-start;
    padding-top: 8px;
}

关键修改点说明 #

• 给所有琴键设置flex布局+水平居中规则，统一控制内容水平位置
• 白键设置align-items: flex-end让内容垂直靠底，搭配底部内边距避免文字贴住琴键边框
• 黑键设置align-items: flex-start让内容垂直靠顶，搭配顶部内边距避免文字贴住琴键边框
• 用视口单位设置字号，适配不同屏幕尺寸，避免文字过大溢出琴键范围造成重叠

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