Flex布局下实现div标题顶对齐、图片底对齐、中间段落居中方案

实现方案 #

仅需要调整CSS代码即可，无需修改原有HTML结构，核心是给列容器开启纵向Flex布局，利用Flex的空间分配特性实现元素对齐：

.instructions {
   width: 80%;
   margin: auto;
}
.row {
    display: flex;
    justify-content: space-between;
}
.instructions-col {
    padding-top: 20px;
    padding-bottom: 20px;
    flex-basis: 15%;
    background: #fff7f3;
    border-radius: 10px;
    text-align: center;
    /* 新增以下两行 */
    display: flex;
    flex-direction: column;
}
/* 新增标题样式，保证顶部对齐、高度统一 */
.instructions-col h5 {
    margin: 0 0 12px 0;
    line-height: 1.2;
}
.instructions-col p {
    font-size: 14px;
    line-height: 22px;
    padding: 20px;
    /* 新增以下三行，让段落填充剩余空间，内容垂直居中 */
    flex: 1;
    display: flex;
    align-items: center;
}
.instructions-col img {
    padding-top: 0;
    border-radius: 6px;
    /* 新增以下一行，让图片贴到底部 */
    margin-top: auto;
}

样式修改说明 #

• 列容器开启纵向Flex布局后，内部元素的位置可以通过Flex属性灵活控制
• 标题清除默认上下外边距后，所有列的标题都会固定在容器顶部，高度保持一致
• 段落设置flex:1后会自动占据标题和图片之间的所有剩余空间，搭配align-items:center即可实现文字垂直居中
• 图片设置margin-top:auto后，会自动被推到列容器的最底部，所有列的图片自然实现水平对齐

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