如何将链接按钮定位在图片下方？Flex布局元素排列异常排查

这个问题的核心原因很明确：你给每个.ps_container>div（也就是每个包含图片和按钮的子项）设置了display: flex，但Flex布局默认的主轴方向是水平（flex-direction: row），再加上你给子项设置了固定高度200px，而图片的max-height是300px，超出了容器高度，Flex的对齐逻辑就把按钮挤到了图片上方，和你想要的垂直排版需求不符。

具体修复方案 #

只需要修改子项的Flex方向，让内部元素垂直排列，再调整一些细节即可：

1. 修改子项的Flex方向
   给.ps_container>div添加flex-direction: column，强制内部的图片和按钮从上到下垂直排列，同时补充水平居中的属性让布局更规整：

.ps_container>div{ /* flexbox items*/
  display: flex;
  flex:1 1 auto;
  justify-content: center;
  align-items: center; /* 新增：让内部元素水平居中 */
  flex-direction: column; /* 核心修改：垂直排列子元素 */
  margin:20px;
  padding-inline: 40px;
  min-height:200px; /* 换成最小高度，避免图片高度不够时容器太矮 */
  background-color: white;
}

2. 优化按钮与图片的间距
   如果希望按钮始终靠在子项底部，或者和图片保持固定间距，可以给按钮添加margin-top属性：

.ps_container>div a{ /* button style*/
  background-color: #20d8da;
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  position: relative;
  z-index: 1;
  display: inline-block;
  min-width: 160px;
  height: 50px;
  color: #fff;
  border-radius: 0;
  padding: 0 30px;
  font-size: 14px;
  line-height: 50px;
  font-weight: 500;
  text-transform: capitalize;
  text-align: center;
  margin-top: 15px; /* 固定间距，或者用auto让按钮贴底 */
}

3. 调整图片的高度限制
   因为子项现在是垂直布局，建议把图片的max-height调整为合适的值，避免超出子项容器：

.ps_container>div img{ /* image style*/
  max-height: 120px; /* 调整后适配子项高度 */
  max-width: 100%; /* 用100%确保图片不超出子项宽度 */
  object-fit: contain;
  vertical-align: middle;
  margin: 0 auto;
}

为什么之前设置display:block没用？ #

你之前尝试给图片设置display:block，但问题根源是父容器（.ps_container>div）的Flex排列方向是水平，不是图片的显示方式，所以这个修改无法解决垂直排版的问题。

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