In this article we will show you the solution of image align center CSS, we will use the background-position property to it. We will see two different examples of it.
In the first method, we will add the background-image property in CSS into <div>. then using the background-image property to no-repeat and background-position to center to Align the image to the Center.
In the second method, we will use the CSS flexbox method. we will set the image tag to flex 1 and add the background-position to the center to Align the image to the center.
Step By Step Guide On Image Align Center CSS :-
Method 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> image align center CSS </title>
<style>
body{
background-color: rgb(51, 50, 50);
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
h1{
color : rgb(95, 194, 95) ;
font-size: 25px;
font-weight : bolder ;
}
h3{
color : rgb(95, 194, 95) ;
font-size: 20px;
}
.container {
height: 500px;
width: 500px;
background-color: lightblue;
background-image: url('bird.jpg');
background-size: 100px;
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<center>
<h1> TALKERSCODE </h1>
<h3> image align center CSS </h3>
</center>
<div class="container">
image
</div>
</body>
</html>
- writing HTML code <!DOCTYPE html> is used to specify the HTML version that a file is written in.
- The <HTML> tag used to specify the root of an HTML document must then be written. Additionally, add the </html> tag at the end.
- The metadata for the HTML file is contained in the <head> tag, which is closed with </head> tag.
- The HTML document's <title> is then established using the title tag, which is followed by the < /title> tag.
- We'll use an external CSS file to style the HTML page.
- The <h1> element is used to add a heading, and the </h1> tag is used to close it.
- creating a <div> with the class of container.
- using <style> tag to add CSS
- for the class container, setting the height and width of the div first. Then set the background-color
- Now adding the background-image and add image URL into it.
- Lastly, adding the background-size. And set the background-repeat to no-repeat and background position to center.
Method 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> image align center css </title>
<style>
body{
background-color: rgb(51, 50, 50);
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
h1{
color : rgb(95, 194, 95) ;
font-size: 25px;
font-weight : bolder ;
}
h3{
color : rgb(95, 194, 95) ;
font-size: 20px;
}
.container{
height: 300px;
width: 300px;
display: flex;
margin: auto auto;
background-position: center;
}
img {
flex: 1;
}
</style>
</head>
<body>
<center>
<h1> TALKERSCODE </h1>
<h3> image align center css </h3>
</center>
<div class="container">
<img src="bird.jpg" alt="">
</div>
</body>
</html>
- writing HTML code <!DOCTYPE html> is used to specify the HTML version that a file is written in.
- The <HTML> tag used to specify the root of an HTML document must then be written. Additionally, add the </html> tag at the end.
- The metadata for the HTML file is contained in the <head> tag, which is closed with </head> tag.
- The HTML document's <title> is then established using the title tag, which is followed by the < /title> tag.
- We'll use an external CSS file to style the HTML page.
- The <h1> element is used to add a heading, and the </h1> tag is used to close it.
- creating a <div> with the class of container. Adding image file using <img> tag into that div.
- using <style> tag to add CSS
- for the container class, set the display to flex. Set the Margin to auto and background-position to center.
- For the img tag, setting the flex to 1.
Conclusion :-
Last, here in conclusion, we can say that with this article’s help, we know How to image align center in CSS.
I hope this article on image align center CSS helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
