CSS -无法在div中将图像和文本对齐

<div>
  <img src="image.jpg" alt="图像" style="display: inline-block; vertical-align: middle;">
  <span style="display: inline-block; vertical-align: middle;">文本内容</span>
</div>

<div style="display: flex; align-items: center;">
  <img src="image.jpg" alt="图像">
  <span>文本内容</span>
</div>

<div style="position: relative;">
  <img src="image.jpg" alt="图像" style="position: absolute; top: 50%; transform: translateY(-50%);">
  <span style="position: absolute; top: 50%; transform: translateY(-50%);">文本内容</span>
</div>