如何在CSS中将跨度文本居中在图像旁边[重复]

【问题标题】：How to center a span text next to an image in CSS [duplicate]如何在CSS中将跨度文本居中在图像旁边[重复]
【发布时间】：2020-04-09 04:45:07
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

标签： html css image text centering

【解决方案1】：

一种方法是将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>

【讨论】：