How to Align Images in CSS?
Last Updated :
12 Sep, 2024
Aligning images properly is essential for creating visually appealing and well-structured web pages. CSS can provide several methods to achieve this, each suited for the different scenarios. we are going to discuss how can we align images using CSS.
Below are the following approaches to align images in CSS:
Using Text Alignment
The text-align property is primarily used for aligning the inline content, such as the text, within block-level containers. Since images are inline elements by default, text-align can work effectively to horizontally align the images as well. This approach can be simple and is mainly used for the basic horizontal alignment (left, center, right) within the container.
Syntax:
.container {
text-align: center;
/* Options: left, right, center, justify */
}Example: In this example, the text-align: center; property on the .container class centers the image horizontally within its container.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Text Alignment Example</title>
<style>
.container {
text-align: center;
}
img {
width: 45%;
height: auto;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240908192235/geekforgeek.png"
alt="Image 1">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240908202351/gfg.jpeg"
alt="Image 2">
</div>
</body>
</html>
Output:
Using Float property
The float property was originally intended for the text wrapping around the images, but it can also be used to place the elements side by side. When the image can be floated, it is taken out of the normal document flow and allowing the other content (such as text or images) to wrap around it.
Syntax:
.image-left {
float: left;
/* Options: left, right */
margin: 10px;
/* Optional: Adds space around the image */
}
.image-right {
float: right;
}Example: In this example, the image with the class .image-left can be floated to the left and allowing the surronding the text to wrap around it.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Float Example</title>
<style>
.image-left {
float: left;
margin: 10px;
width: 45%;
height: auto;
}
.image-right {
float: right;
margin: 10px;
width: 45%;
height: auto;
}
.container::after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="container">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240908202351/gfg.jpeg"
alt="Image 1" class="image-left">
<img src="
https://media.geeksforgeeks.org/wp-content/uploads/20240908192235/geekforgeek.png"
alt="Image 2" class="image-right">
</div>
</body>
</html>
Output:
Using Flexbox Model
Flexbox is the one-dimensional layout model that allows for the flexible and precise alignment of the elements along both the horizontally and vertical axes. Flexbox container distributes the space among the items and provide the alignment capabilities that make it perfect for the responsive layouts.
Syntax:
.container {
display: flex;
justify-content: center;
/* Options: flex-start, center, flex-end, space-between, space-around */
align-items: center;
/* Options: flex-start, center, flex-end, baseline, stretch */
}
.image {
align-self: center;
/* Options: auto, flex-start, center, flex-end, baseline, stretch */
}Example: In this example, the flex container center the image both horizontally and vertically withinh the viewport using the jusfity-content and align-items.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Flexbox Example</title>
<style>
.container {
display: flex;
justify-content: space-between;
/* Adjust as needed: flex-start, center, space-between, space-around */
align-items: center;
height: 100vh;
/* Full viewport height */
}
img {
width: 45%;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240908192235/geekforgeek.png"
alt="Image 1">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240908202351/gfg.jpeg"
alt="Image 2">
</div>
</body>
</html>
Output:
Using Grid Layout
CSS Grid is the two-dimensional layout system that gives you fine-grained control over the both rows and columns. We can create the complex layouts by defining the grid lines, tracks, and areas. Each grid item can be precisely placed into the specific column and row, making it very flexible for the layout design.
Syntax:
.container {
display: grid;
grid-template-columns: 1fr 1fr;
/* Creates two equal columns */
}
.image {
grid-column: 2;
/* Positions the image in the second column */
justify-self: center;
/* Options: start, center, end, stretch */
}Example: In this example, the image can be placed in the second column of the grid with two columns, and is centered within that the column using justify-self.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Grid Example</title>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
/* Adds space between grid items */
}
img {
grid-column: span 1;
justify-self: center;
/* Centers image within its grid cell */
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240908202351/gfg.jpeg"
alt="Image 1">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240908192235/geekforgeek.png"
alt="Image 2">
</div>
</body>
</html>
Output:
Using Positioning Property
The position property in CSS can allows you to control the position of the elements based on their containing block. There are several values for the position:
Syntax:
.container {
position: relative;
/* Establishes a containing block for absolutely positioned elements */
}
.image {
position: absolute;
top: 10px;
left: 20px;
}Example: In this example, the image can be positioned 20px from the top and 30px from the left of the .container using the absolute positioning.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Positioning Example</title>
<style>
.container {
position: relative;
height: 300px;
border: 1px solid #ccc;
}
.image {
position: absolute;
width: 45%;
height: auto;
}
.image1 {
top: 10px;
left: 10px;
}
.image2 {
top: 10px;
right: 10px;
}
</style>
</head>
<body>
<div class="container">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240908192235/geekforgeek.png"
alt="Image 1"
class="image image1">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240908202351/gfg.jpeg"
alt="Image 2"
class="image image2">
</div>
</body>
</html>
Output:
Using Margin Property
Using the margin property, we can align the images by adjusting the space around them. Specifically, setting the margin-left: auto and margin-right: auto allows for the horizontally centering of the block-level elements. This method can be particularly useful when you want to center the image inside a container.
Syntax:
.image {
display: block;
margin-left: auto;
margin-right: auto;
/* Centers the image horizontally */
}Example: In this example, the images are centered horizontally within the .container by setting the margin-left and margin-right to auto and ensuring the display: block for the images.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Margin Example</title>
<style>
.container {
width: 80%;
margin: 0 auto;
border: 1px solid #ccc;
text-align: center;
/* Aligns images horizontally within the container */
}
img {
display: block;
margin: 10px auto;
width: 45%;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240908192235/geekforgeek.png"
alt="Image 1">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240908202351/gfg.jpeg"
alt="Image 2">
</div>
</body>
</html>
Output:
Similar Reads
How to Add Image in CSS?
Images are an essential part of web design, bringing the visual appeal and providing the context to content. In web development, images can be added to the websites using HTML and styled or manipulated using CSS. CSS can offer various ways to incorporate images into web pages, allowing the developer
3 min read
How to align Image in HTML?
Aligning images within a webpage is an essential part of web design. It allows you to control how images are positioned about surrounding content. In HTML, there are several ways to align images using both attributes and CSS techniques, ranging from simple alignment to more advanced responsive layou
4 min read
How To Center Image In CSS ?
To center an image in CSS, we will align the image to the container horizontally and vertically as the layout requires. Center Images Horizontally1. Using text-align PropertyThe simplest way to center an image horizontally within a block-level container is to use the text-align property. This method
3 min read
How to align images in Bootstrap 4 ?
We know that adding images to a website makes it more attractive and presentable. Sometimes, we need to align the images either at the right or to the left. Most of the time, we place an image at the center. With traditional CSS, we had to write a bunch of code to accomplish this specific task. Boot
4 min read
How to Add Background Image in CSS?
The CSS background-image property is used to add an image as a background to an element. Syntax background-image: url()1. Setting background Image of an ElementA background image is added to an h1 tag using the URL. [GFGTABS] HTML <h1 style="background-image: url( 'https://media.geeksfor
1 min read
How to Set Background Image in CSS?
CSS (Cascading Style Sheets) can allow developers to set the background image for the web pages or specific HTML elements. This feature can help enhance the visual aesthetics of the website. The background-image property in CSS can be used to specific one or multiple background images to be applied
3 min read
How to Align Images Side By Side using CSS ?
Images side by side means placing multiple images in a single row next to each other. This arrangement shows images in a horizontal line, making it great for photo galleries, and comparing pictures. To align images side by side using CSS, we can use flexbox or grid for layout. Table of Content Using
2 min read
How to Center an Image in HTML?
Center an image in HTML can be done with the help of <center> tag. The <center> is depreciated from HTML5, so we can use the text-align property, margin, and different ways to center an image horizontally, vertically, or both using CSS. Table of Content Horizontally Center an Image using
3 min read
How to set position of an image in CSS ?
To change the position of an image in CSS, properties like object position and float are used to control the placement of an image within its container. 1. Using object-position PropertyThe object-position property in CSS is used to set the position of an image within its container when using the ob
2 min read
How to add image refaction using CSS ?
This article will show how to add image reflection using CSS. To achieve this task, you can use the -webkit-box-reflect to add the reflection of any HTML element. The box-reflect property is a CSS property that allows you to create a reflection effect for an element. It is primarily used to add a mi
2 min read