如何让文本居中对应图片上方？求链接下移问题的替代CSS解法

云上老周

2026-5-9

不用`display:contents`的替代方案

嘿，我有个更直观且兼容性更好的方案，既能实现文本与对应图片居中对齐的效果，又完全不需要用到display:contents。核心思路是把每组「文本+图片+链接」打包成独立的容器，让布局逻辑更清晰，也能解决原结构里的对齐问题。

修改后的HTML结构

<div class="choiceImage">
  <div class="item">
    <p>I'm looking for..</p>
    <a href="#"><img alt="want something" src="image/want-something.jpg"></a>
  </div>
  <div class="item">
    <p>I offer something..</p>
    <a href="#"><img alt="offer something" src="image/offer-something.jpg"></a>
  </div>
</div>

调整后的CSS样式

.choiceImage { 
  margin: 10px; 
  width: 790px; 
  /* 去掉固定height，让内容自适应更灵活 */
  display: flex; 
  justify-content: space-around; 
  align-items: center;
}

.choiceImage .item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.choiceImage img { 
  width: 350px; 
  height: 350px; 
  margin: 20px 0; 
  border-radius: 2px; 
}

.choiceImage p { 
  background-color: beige; 
  border-radius: 10px; 
  color: black; 
  width: 270px; 
  font-size: 25px; 
  font-weight: bold; 
  text-align: center; 
  padding: 8px 0; /* 加一点内边距让文本更舒服 */
}

.choiceImage img:hover { 
  opacity: 0.5; 
}