Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

How to align image vertically in a division that spans vertically on the whole webpage using CSS ?

  • Difficulty Level : Easy
  • Last Updated : 22 Aug, 2021

In this article, we will discuss the vertical alignment of images in a single division that spans vertically on the whole webpage. Vertical alignment of images refers to placing the images in a column. We often need to align the image vertically in order to display it properly on the mobile version or sometimes, we don’t want to insert a horizontal scroll bar. We will use the CSS flex property for this purpose.

Approach:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

  • Create a div tag to place the images.
  • In the <img> tag, provide the path of the images using the src attribute and an alternative text using the alt attribute.
  • Add CSS properties to display the images in a vertical alignment.

Example 1: In this example, we have used the text that illustrates the vertical alignment of the image along with the text. For this, we have used the vertical-align CSS property to align it vertically.

HTML




<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Vertical images layout</title>
    <style>
      body {
        background: rgb(225, 227, 222);
      }
      .container {
        border: 1px solid black;
        height: 205px;
        width: 590px;
        padding: 5px;
        margin-top: 180px;
        margin-left: 350px;
        border-radius: 5px;
      }
      .container img {
        width: 200px;
        height: 200px;
        padding: 3px;
        border-radius: 7px;
      }
      span {
        padding: 1px;
        font-size: 60px;
        color: green;
        vertical-align: 128%;
      }
    </style>
  </head>
  
  <body>
    <div class="container">
      <img src=
        alt="image-2"/>
      <span>GeeksforGeeks</span>
    </div>
  </body>
</html>

Output: From the output, we can see that the image that is vertical-align with the text.



In order to align the series of images vertically, we will use CSS display property combined with align-items & flex-direction property. We need to create a parent element. After declaring the parent element as flexbox using display: flex;, we can align the items to the center using align-items: center; along with setting the direction of the column as vertical using flex-direction: column;.

Syntax:

.class_name {
    display: flex;
    flex-direction: column;
    align-items: center;
}

We will declare the CSS properties in the style tag to change the layout.

  1. display: flex The flex property in CSS is used to set the length of flexible items and expands or shrink the items to fill extra space or to prevent overflow respectively.
  2. flex-direction: column – This property is used to align the items of the class on which it is applied in a vertical way.
  3. align-items: center – This property is used to display the items in the center of the screen.

Example 2: In this example, we will display the images vertically using the above approach.

HTML




<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Vertical images layout</title>
    <style>
      body {
        background: rgb(225, 227, 222);
      }
      .container {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .container img {
        width: 200px;
        height: 200px;
        padding: 3px;
        margin-left: 3px;
      }
    </style>
  </head>
    
  <body>
    <div class="container">
      <img src=
        alt="image-1"/>
      <img src=
        alt="image-2"/>
      <img src=
        alt="image-3"/>
    </div>
  </body>
</html>

Output: Here, we can see that all 3 images are aligned vertically.

Note: If we do need not define the size of the images explicitly, images will cover the whole webpage. The size of the images may vary as per the requirement. 

Supported Browsers:

  • Google Chrome 29.0
  • Firefox 28.0
  • Microsoft Edge 11.0
  • Safari 9.0
  • Opera 17.0



My Personal Notes arrow_drop_up
Recommended Articles
Page :