使用CSS Flex布局时div内图片下方文本与按钮对齐问题求助

问题原因 #

• 原有HTML结构嵌套错误，父容器和子卡片用了相同类名，flex布局规则冲突
• flex默认是横向排列，你没有给单个卡片设置纵向排列的规则，导致图片、文字、按钮全部挤在同一行
• 没有设置元素间距和自动填充规则，无法让按钮固定在卡片底部

修正方案 #

先调整HTML结构，区分外层布局容器和内层卡片容器，再修改对应CSS规则：

<!-- 外层布局容器，用来放两个并排的卡片 -->
<div class="card-wrapper">
  <!-- 第一个卡片 -->
  <div class="goods-card">
    <img src="https://i.imgur.com/AbZMoEL.png" class="image" alt="cookie picture">
    <p>cookies are great!</p>
    <a class="modulbutton" href="#open1">Open modal link</a>
  </div>
  <!-- 第二个卡片 -->
  <div class="goods-card">
    <img src="https://i.imgur.com/kdOyxwV.png" class="image" alt="icecream picture">
    <p>Ice cream is great!</p>
    <a class="modulbutton" href="#open1">Open modal link</a>
  </div>
</div>

<!-- 后面的modal结构保持不变，注意补充之前缺失的闭合标签即可 -->
<div id="open1" class="modalwindow">
  <div class="msgblock">
    <h1>Heading</h1>
    <p>some text</p>
    <img src="2.jpg" alt="missing">
    <div> <a href="#">Close</a></div>
  </div>
</div>

<style>
/* 外层容器：横向排列两个卡片 */
.card-wrapper {
  width: 900px;
  border: 3px solid blue;
  display: flex;
  gap: 20px; /* 两个卡片的间距 */
  padding: 20px;
  box-sizing: border-box;
}
/* 单个卡片：纵向排列内容 */
.goods-card {
  flex: 1; /* 两个卡片平分宽度 */
  height: 400px;
  display: flex;
  flex-direction: column; /* 纵向排列 */
  align-items: center; /* 所有内容水平居中 */
  justify-content: flex-start;
}
/* 描述文本自动占满剩余空间，把按钮挤到最底部 */
.goods-card p {
  flex: 1;
  display: flex;
  align-items: center; /* 文字垂直居中在图片和按钮中间 */
  margin: 10px 0;
}
.modulbutton{
  background-color: green;
  color: white;
  padding: 12px 24px; /* 固定内边距比百分比更可控 */
  text-decoration: none;
}
</style>

效果说明 #

修改后每个卡片内部图片在上、文字居中、按钮固定在底部，两个卡片整体在蓝色边框容器内横向并排，和你预期的效果一致。注意检查原有代码里所有未闭合的HTML标签，避免渲染异常。

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