How to Vertically Align a Text Next to the Image

If you want your Website to look beautiful and harmonious, then this snippet is for you. It will help you to learn how to align text next to an image vertically. Let’s dive in and learn to do it together!

Create HTML

Put three <div> elements and give them “container”, “image” and “text” class names.
Put your image within the second <div> element with the help of the <img> tag and its <span class="attribute">src</span> attribute.
Add some text in the <h1> element.

How to Vertically Align Text Next to an Image

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
  </head>
  <body>
    <div class="container">
      <div class="image">
        <img src="https://i.pinimg.com/originals/26/ea/fc/26eafc0b14488fea03fa8fa9751203ff.jpg">
      </div>
      <div class="text">
        <h1>Paris is one of the most beautiful cities in France.</h1>
      </div>
    </div>
  </body>
</html>

Add CSS

Set the display property to flex. It will represent the element as a flex container.
Use the align-items property with the center value to place the items at the center of the container.
Use the gap property to set the spacing between flex items.
Set the max-width of the image to 100%.
Set the flex-basis property of the .image class to specify the initial main size of your image.
Choose the font size of your text with the help of the font-size property.
Add a media query to wrap the flex container on smaller screens.

How to Vertically Align Text Next to an Image

.container {
  display: flex;
  align-items: center;
  gap: 20px;
}

img {
  max-width: 100%;
}

.image {
  flex-basis: 40%;
}

.text {
  font-size: 20px;
}

@media (max-width: 800px) {
  .container {
    flex-wrap: wrap;
  }
}

You can style the text with other properties, such as color, text-alignment, text-decoration, text-transform, text-shadow and so on.

Now let’s put the code parts together and see the result.

Example of vertically aligning a text next to the image:

Example of vertically aligning text next to an image

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .container {
        display: flex;
        align-items: center;
        gap: 20px;
      }
      img {
        max-width: 100%;
      }
      .image {
        flex-basis: 40%;
      }
      .text {
        font-size: 20px;
      }
      @media (max-width: 800px) {
        .container {
          flex-wrap: wrap;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="image">
        <img src="https://i.pinimg.com/originals/26/ea/fc/26eafc0b14488fea03fa8fa9751203ff.jpg" />
      </div>
      <div class="text">
        <h1>Paris is one of the most beautiful cities in France.</h1>
      </div>
    </div>
  </body>
</html>

Try it Yourself »

Result

<div class="demo my-2.5 not-prose"> <div class="image"> </div> <div class="text"> ## Paris is one of the most beautiful cities in France.

</div> </div> You can style the text with other properties, such as font, color, text-decoration, text-shadow and so on.

Example of styling a vertically aligned text:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .container {
        display: flex;
        align-items: center;
        gap: 20px;
      }
      img {
        max-width: 100%;
      }
      .image {
        flex-basis: 70%;
        order: 2;
      }
      .text {
        color: #CD5C5C;
        font: italic 10px "Fira Sans", serif;
      }
      @media (max-width: 800px) {
        .container {
          flex-wrap: wrap;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="image">
        <img src="https://cdn.londonandpartners.com/visit/general-london/areas/river/76709-640x360-houses-of-parliament-and-london-eye-on-thames-from-above-640.jpg" />
      </div>
      <div class="text">
        <h1>London is the capital and largest city of England.</h1>
      </div>
    </div>
  </body>
</html>

Try it Yourself »