How to vertically align an image in CSS that stretches across the entire page
CSS How to Vertically Align an Image on a Webpage
Alignment is key in determining where to position your elements, such as text and https://coder-cafe.com/wp-content/uploads/2025/09/images, buttons, and content boxes. A key component of responsive design is the arrangement of items on your website. This is because when a website is opened on a device with a smaller screen size, such as a smartphone, the layout and structure of the website will adjust to your pre-planned content.
However, this change will affect the spacing between and within items, as well as how they are aligned and positioned. You might see buttons or forms become unclickable or incomplete, or half your text disappears off the screen if your alignment isn’t correct.
In this article, we’ll discuss how to vertically align https://coder-cafe.com/wp-content/uploads/2025/09/images within a section element. When https://coder-cafe.com/wp-content/uploads/2025/09/images are vertically aligned, they are organized into columns. This is called vertical alignment of the image. Images can be vertically aligned with any text or other https://coder-cafe.com/wp-content/uploads/2025/09/images themselves. This can be achieved by using some CSS properties such as CSS grid, CSS flexbox, vertical-align, etc.
Using the CSS Vertical Alignment Property
Vertical-align – The vertical alignment of an element is set using this CSS property.
Syntax
element{
vertical-align: values;
}
Values can be one of the following –
- Length – Raises or lowers the element by a specified length.
- % – Raises or lowers the element by a specified length.
- Top, middle, bottom, baseline, etc.
- Initial
- Inherit
Example
Here, we use the vertical-align property to vertically align the image and text.
<!DOCTYPE html>
<html>
<head>
<title> Vertical Alignment </title>
<style>
body {
background: rgb(200, 221, 220);
}
h1{
text-align: center;
color: #00FF00;
text-decoration: underline;
}
.main {
border: 1px solid black;
height: 70%;
width: 90%;
padding: 15px;
margin-top: 10px;
margin-right: -5px;
border-radius: 5px;
}
.main img {
width: 40%;
height: 8%;
padding: 2px;
border-radius: 7px;
}
span {
padding: 55px;
font-size: 25px;
color: #097969;
vertical-align: 100%;
font-family: Brush Script MT;
font-weight: 900;
}
img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<h1> Vertical Alignment </h1>
<div class= "main">
<img src= "https://www.tutorialspoint.com/https://coder-cafe.com/wp-content/uploads/2025/09/images/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png" alt= "tutorialspoint">
<span>Welcome to Tutorialspoint </span>
</div>
</body>
</html>
Using CSS Flexbox
Vertical alignment of a series of elements can be achieved using CSS Flexbox and CSS Grid.
A CSS Flexbox is a container that contains several flexible elements. These flexible elements can be arranged into rows or columns as needed. The flex container is the parent element, and the flex items are its children.
display:flex allows developers to style each component to make it look appropriate and attractive. It arranges the element’s children into rows or columns.
There are various flexible container properties. They are mentioned below.
- Flex-direction – It is used to indicate the direction in which the container will stack flex components. Values – Column, Column-Reverse, Row, Row-Reverse
-
Flex-wrap – This is used to specify or determine whether flex items should wrap. Values – Wrap, Wrap Now
-
Flex-flow – This allows developers to specify both flex-direction and flexwrap. Values – Row wrap, Column nowrap, etc.
-
Align-items – This allows you to determine the alignment of flex items.
-
Values — Center, flex-start, flex-end, space-around, etc.
-
Flex-basis – Used to specify the size of a flex item.
-
**Values** – Can be lengths (cm, px, em) or percentages.
-
Justify-content – This is also used to align flex items.
-
**Values** – Center, flex-start, flex-end, wrapping space, etc.
-
Flex-shrink – Accepts a number as a value. If an item has a value of 3, it will shrink three times as much as if it had a value of 1.
-
Order- This specifies the order in which the flexible elements should be arranged.
Example
<!DOCTYPE html>
<html>
<head>
<title> Vertical alignment of series of https://coder-cafe.com/wp-content/uploads/2025/09/images </title>
<style>
body {
background: rgb(200, 221, 220);
}
h1{
text-align: left;
margin: 15px;
color: green;
text-decoration: underline;
}
h2{
margin: 15px;
}
.main {
border: 1px solid black;
height: 55%;
width: 20%;
padding: 25px;
margin: 10px;
border-radius: 5px;
}
.main img {
width: 100px;
height: 110px;
padding: 3px;
border-radius: 7px;
}
.main{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<h2> Vertical alignment of https://coder-cafe.com/wp-content/uploads/2025/09/images using CSS flexbox </h2>
<div class="main">
<img src= "https://www.tutorialspoint.com/coffeescript/https://coder-cafe.com/wp-content/uploads/2025/09/images/coffeescript-mini-logo.jpg" alt= "Nature 1">
<img src= "https://www.tutorialspoint.com/javafx/https://coder-cafe.com/wp-content/uploads/2025/09/images/javafx-mini-logo.jpg" alt= "Nature 2">
<img src= "https://www.tutorialspoint.com/hadoop/https://coder-cafe.com/wp-content/uploads/2025/09/images/hadoop-mini-logo.jpg" alt= "Nature 3">
</div>
</body>
</html>
Using CSS Grid
Building web pages is much simpler thanks to CSS Grid, which allows developers to create a grid-based layout system of rows and columns without having to use floats and positioning. The grid-container is the parent element, and ** Display: grid** is used to create a grid.
Some CSS Grid properties are as follows –
- Grid-template-columns – This is used to create columns. Its values can be lengths, percentages, etc.
-
Grid-template-rows – This is used to create rows. Values are in units of length, % etc.
-
Grid-gap – This is a shorthand property for the gaps between columns and rows.
Example
<!DOCTYPE html>
<html>
<head>
<title> Vertical alignment of https://coder-cafe.com/wp-content/uploads/2025/09/images using CSS Grid </title>
<style>
body {
background: rgb(200, 221, 220);
}
h1{
text-align: left;
margin: 15px;
color: green;
text-decoration: underline;
}
h2{
margin: 15px;
}
.main {
border: 1px solid black;
height: 55%;
width: 30%;
padding: 15px;
margin: 10px;
border-radius: 5px;
display: grid;
grid-template-rows: 35% 35%;
}
.main img {
width: 150px;
height: 110px;
padding: 2px;
border-radius: 7px;
}
</style>
</head>
<body>
<h2> Vertical alignment of https://coder-cafe.com/wp-content/uploads/2025/09/images using CSS Grid </h2>
<div class="main">
<img src= "https://www.tutorialspoint.com/coffeescript/https://coder-cafe.com/wp-content/uploads/2025/09/images/coffeescript-mini-logo.jpg" alt= "Nature 1">
<img src= "https://www.tutorialspoint.com/javafx/https://coder-cafe.com/wp-content/uploads/2025/09/images/javafx-mini-logo.jpg" alt= "Nature 2">
<img src= "https://www.tutorialspoint.com/hadoop/https://coder-cafe.com/wp-content/uploads/2025/09/images/hadoop-mini-logo.jpg" alt= "Nature 3">
</div>
</body>
Summary
In this article, we discussed different ways to vertically align https://coder-cafe.com/wp-content/uploads/2025/09/images in a web page that extends across the entire page.