How to Align Images Side By Side using CSS ?
Last Updated :
05 Apr, 2023
In this article, we will understand how we can Align Images Side By Side using CSS. In CSS, there are many properties to use and align the images, and we can also use JavaScript for that work. but we will perform it using CSS only. Basically, Aligning images side by side means placing two or more image side by side means consecutively one after one for that we will write the HTML (Hypertext Markup Language) and CSS(Cascading Style Sheets) code.
So, using the CSS we can display the image using three main properties.
- Float properties.
- Using Flexbox.
- CSS Grid.
Syntax:
float:none|right|left|initial|inherit
.content {
justify-content: space-around;
align-items: center;
display: flex;
flex-direction: row;
}
.grid-content {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
Example 1: In this example, we will use the Internal CSS and represent how to create side-by-side images with the CSS float property.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Align-Images</title>
<style>
* {
margin-left: 7px;
/* box-sizing: border-box; */
}
h1 {
text-align: center;
color: green;
font-weight: bolder;
}
p {
text-align: center;
color: red;
font-size: 20px;
font-weight: bolder;
}
.column {
float: left;
width: 30%;
height: 30%;
}
</style>
</head>
<body>
<h1>
Hello GeeksForGeeks !
Images Side by Side
</h1>
<p>
GeeksforGeeks present side-by-side
images with the CSS float property:
</p>
<div class="column">
<img src=
style="width: 80%;">
</div>
<div class="column">
<img src=
style="width: 80%;">
</div>
<div class="column">
<img src=
style="width: 80%;">
</div>
</body>
</html>
|
Output :
.gif)
How To Align Images Side By Side using CSS?
Explanation: The “body” section contains the actual content of the page. The first tag is an “h1″ tag, which displays the text “Hello GeeksForGeeks ! Images Side by Side” in green bold font. The next tag is a “p” tag that displays a message in red bold font. The “div” with a class “column” is used to display three images, each floating to the left with a width of 30%. The “row::after” selector clears the float and displays the contents in a table format. Each “column” contains an “img” tag that displays an image with a width of 80%.
Example 2: In this example, a webpage that aligns images side by side using CSS Flexbox. The webpage has two main sections: header and content.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Align-Images Flexbox</title>
<style>
header {
font-size: 20px;
align-items: center;
justify-content: center;
display: flex;
height: 10vh;
background-color: rgb(85, 123, 1);
color: white;
}
.content {
justify-content: space-around;
align-items: center;
display: flex;
flex-direction: row;
}
.box {
width: 73%;
height: 25%;
padding: 5px;
}
</style>
</head>
<body>
<header>
<h1>
GeeksForGeeks Align-Images using Flexbox
</h1>
</header>
<div class="content">
<div class="box">
<img src=
style="width: 80%;">
</div>
<div class="box">
<img src=
style="width: 80%;">
</div>
<div class="box">
<img src=
style="width: 80%;">
</div>
</div>
</body>
</html>
|
Output :
.gif)
How To Align Images Side By Side using CSS?
Explanation: The content section contains a div tag with a class of “content”. It has styles that justify the content to be spaced around, align the items to the center, display as a flex container, and set the flex-direction to a row (horizontally). The content section contains three div tags with a class of “box”. Each box contains an image tag that displays an image.
Example 3: In this example, a webpage that aligns images side by side uses a CSS grid.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Grid-CSS</title>
<style>
h1 {
color: green;
font-size: 35px;
margin-left: 50px;
font-weight: bolder;
}
.grid-content {
width: 73%;
margin-left: 20px;
height: 70%;
padding: 2px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
</style>
</head>
<body>
<h1>
GeeksForGeeks Align-Images
using Grid CSS
</h1>
<div class="grid-content">
<img src=
style="width: 100%;">
<img src=
style="width: 100%;">
<img src=
style="width: 100%;">
</div>
</body>
</html>
|
Output:
Firstly add the heading tag h1. The content section contains a div tag with a class of “grid-content“. Each grid contains an img tag that displays an image. It has styles that grid-template-columns the content to be repeated 3 times, aligns the items to the center, displays as a grid, and set the grid-gap.
Share your thoughts in the comments
Please Login to comment...