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

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:
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="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"        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.
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.flex-direction: column – This property is used to align the items of the class on which it is applied in a vertical way.align-items: center – This property is used to display the items in the center of the screen.
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.
flex-direction: column – This property is used to align the items of the class on which it is applied in a vertical way.
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="https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"        alt="image-1"/>      <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"        alt="image-2"/>      <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"        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
CSS-Properties
CSS-Questions
HTML-Questions
Picked
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a Tribute Page using HTML & CSS
Build a Survey Form using HTML and CSS
Form validation using jQuery
Design a web page using HTML and CSS
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
HTTP headers | Content-Type