使用Flexbox实现CSS垂直对齐失败问题求助

安全阿岳

2026-8-20

解决Flex布局下Div内文本垂直居中问题

问题分析

当前代码中，外层容器.exercise_list固定了70px高度，但未设置垂直对齐的布局规则；内层.row添加的margin-top:10px会将内容向下偏移，破坏预期的垂直居中效果；同时.row的align-items:center仅作用于自身子元素（左右列），无法让.row整体在.exercise_list中垂直居中。

修复方案

只需对CSS做两处关键修改：

给.exercise_list添加Flex布局，实现内部元素垂直居中
移除.row的margin-top:10px，避免内容偏移

修改后的完整CSS代码：

.row {
    display: flex;
    align-items: center;
    margin-left: 44px;
    margin-right: 44px;
    /* 移除破坏居中的margin-top */
}

.column_left {
    flex: 28%;
}

.column_right {
    flex: 72%;
}

.group_title {
    color: #000000;
    font-family: "Noto Serif";
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0;
}

.group_description {
    width: 408px;
    color: #000000;
    font-family: "Noto Serif";
    font-size: 15px;
    letter-spacing: 0;
}

.exercise_list {
    height: 70px;
    background: #FFEFD5;
    /* 添加Flex布局实现垂直居中 */
    display: flex;
    align-items: center;
}