如何在 CSS 中将跨度文本居中放置在图像旁边

How to center a span text next to an image in CSS

我正在尝试使用 CSS 将文本与图像一起居中。我以为变换标签会将它沿着图像居中，但那一定是针对不同的情况。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
        img{
          width: 100px;
        }
         .text {
            font-size: 50px;
            transform: translateY(-50%);
         }
        </style>
    </head>
<body>
<div class="class">
   <img src="image.jpg">
   <span class="text">Center text</span>
  </div>
</body>

一种方法是将 display: inline-block; 和 vertical-align: middle; 应用于图像和文本范围：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    img {
      width: 100px;
      display: inline-block;
      vertical-align: middle;
    }
    
    .text {
      display: inline-block;
      vertical-align: middle;
      font-size: 50px;
    }
  </style>
</head>

<body>
  <div class="class">
    <img src="image.jpg">
    <span class="text">Center text</span>
  </div>
</body>