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

Question

I'm trying to center the text along side the image with CSS. I thought the transform tag would center it along the image but that must've been for a different circumstance.

<!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>

score 0 · Accepted Answer · answered Dec 16 '19 at 17:21

One way to do it is to apply display: inline-block; and vertical-align: middle; both to the image and the text span:

<!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>

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

1 Answers1