Align Image In Center Of DIV
Last Updated : Mar 11, 2024
IN - HTML CSS | Written & Updated By - Dikshita
In this article we will show you the solution of align image in center of div, the Cascading style sheet or CSS is used to add style to the HTML.
We can align image in center of div by using CSS using the transform property or using the margin property.
We will see two examples to align image in center of div.
Step By Step Guide On Align Image In Center Of DIV :-
Method 1
First, let us see an example align the image in the center of the div.
<!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 image in center of div</title>
<style>
h1 {
font-size : larger ;
font-weight : bolder ;
color : lightgreen ;
}
.container {
width: 250px ;
height: 250px ;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.image{
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<h1> TALKERSCODE </h1>
<p> align image in center of div </p>
<div class="container">
<img src="https://cdn.pixabay.com/photo/2021/01/23/18/08/hills-5943233_960_720.jpg" alt="" class="image">
</div>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h1> tag used to add heading here.
- Creating a <div> with a class “container” .
- Into the <div> we add an image URL.
- Now create a <style> tag under the <head> tag
- Addressing the class “container”, adding height and width. Set the “position” property to “absolute”, and set the “top” and “left” to “50%”. Adding the “transform” property to translate(-50%,-50%).
- Now addressing the class “image”, add the height and width.
Method 2
Let us see another example.
<!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 image in center of div </title>
<style>
h1 {
font-size : larger ;
font-weight : bolder ;
color : lightgreen ;
}
.image {
height : 100px ;
width : 100px ;
margin : auto ;
display : flex ;
}
</style>
</head>
<body>
<h1> TALKERSCODE </h1>
<p> align image in center of div </p>
<div class = " container " >
<img src="https://cdn.pixabay.com/photo/2021/01/23/18/08/hills-5943233_960_720.jpg" alt="" class="image">
</div>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h1> tag used to add heading here.
- Creating a <div> with a class “container” .
- Into the <div> we add an image URL.
- Now create a <style> tag under the <head> tag
- Addressing the class “image”, adding the height and width. Set the “margin” property to “auto” and the “display” property to “flex”.
Conclusion :-
At last here in conclusion, here we can say that with the help of this article we are able to align image in center of div using CSS.
I hope this article on align image in center of div helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
