如何用CSS实现HTML中右侧图片在标题间的垂直居中？

我希望将右侧的图片垂直居中，使其位于两个绿色标题之间，请问有人能帮我解决这个问题吗？

我的CSS代码：

.vorigejaren img {
        width: 25%;
        height: auto;
        float: right;
 }
 
.vorigejaren p {
    display: inline;
}

我的HTML代码：

<div class="vorigejaren">
<img src="../fotos/leden/Praesidium/Groepsfoto_2022_aangepast.jpg" alt="foto">
<p><?php echo $jaar['leden']; ?></p>
</div>

我已经在网上查找过方法，但似乎都不起作用……

解决方案：使用Flexbox实现垂直居中 #

float属于旧流式布局方案，很难精准实现垂直居中，推荐用现代Flexbox布局解决，代码修改如下：

修改后的CSS：

.vorigejaren {
  display: flex;
  align-items: center; /* 核心属性：让子元素垂直居中 */
  justify-content: space-between; /* 让图片靠右、文字靠左分布 */
}

.vorigejaren img {
  width: 25%;
  height: auto;
  /* 移除float: right;，Flexbox会自动处理元素位置 */
}

.vorigejaren p {
  margin: 0; /* 清除默认边距，避免布局偏移 */
}

效果说明：

• display: flex 将容器转为Flex布局容器
• align-items: center 让容器内的图片和文字在垂直方向上居中对齐
• justify-content: space-between 让文字和图片分别靠容器左右两侧，保持排版整洁

备选方案：使用Grid布局 #

如果偏好Grid布局，也可以用以下代码实现同样效果：

.vorigejaren {
  display: grid;
  grid-template-columns: 1fr auto; /* 文字占满剩余空间，图片自适应宽度 */
  align-items: center; /* 垂直居中 */
  gap: 1rem; /* 可选：添加文字与图片之间的间距 */
}

.vorigejaren img {
  width: 25%;
  height: auto;
}

两种方案都能让图片稳定垂直居中在标题之间，兼容性良好，无需调整现有HTML结构。

内容的提问来源于stack exchange，提问作者Wolle Van Poucke