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 src attribute.
Add some text in the <h1> element.

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

Put the display property and choose the "flex" value. It will represent the element as a block-level-flex container.
Use the align-items property with the "center" value to place the items at the center of the container.
Set the justify-content property to "center".
Put the image’s maximum width to 100% with the max-width property.
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.
Use the padding-left property to set the padding space on the text’s left side.

.container {
  display: flex;
  align-items: center;
  justify-content: center
}

img {
  max-width: 100%
}

.image {
  flex-basis: 40%
}

.text {
  font-size: 20px;
  padding-left: 20px;
}

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:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .container {
        display: flex;
        align-items: center;
        justify-content: center
      }
      img {
        max-width: 100%
      }
      .image {
        flex-basis: 40%
      }
      .text {
        font-size: 20px;
        padding-left: 20px;
      }
    </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

Paris is one of the most beautiful cities in France.

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;
        justify-content: center
      }
      img {
        max-width: 100%
      }
      .image {
        flex-basis: 70%;
        order: 2;
      }
      .text {
        color: #CD5C5C;
        padding-left: 20px;
        font: italic 10px "Fira Sans", serif;
      }
    </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>