How to Vertically Align Text Next to an 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 vertically align text next to an image. Let’s dive in and learn to do it together!

Create HTML

  • Put three HTML <div> elements and give them “container”, “image” and “text” class names.
  • Put your image within the second <div> element with the help of the HTML <img> tag and its "src" attribute.
  • Add some text in the HTML <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

Now let’s style our div elements. Let’s start with the first one.

  • Put the CSS display property and choose the flex value. It will represent the element as a block-level-flex container.
  • Use the CSS align-items property with the center value to place the items at the center of the container.
  • Put the image’s maximum width to 100% with the CSS max-width property.
.container {
  display: flex;
  align-items: center;
  justify-content: center
}

img {
  max-width: 100%
}

Style the second div element.

  • Put the CSS flex-basis property to specify the initial main size of your image.

And finally, style the text.

  • Choose the font size of your text with the help of the CSS font-size property.
  • Use the padding-left property to set the padding space on the text’s left side.
.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 text next to an 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>

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>

Do you find this helpful?

Related articles