How to align image vertically in a division that spans vertically on the whole webpage using CSS ?
Last Updated :
15 May, 2023
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=
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 the CSS display property combined with the 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 expand 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=
<img src=
<img src=
</div>
</body>
</html>
|
Output: Here, we can see that all 3 images are aligned vertically.
Note: If we do need not to 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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...