In this tutorial we will show you the solution of CSS center image in DIV, here, one more question arises that is we want to align the image center vertically or horizontally? In this article, we will understand how to center an image horizontally whereas in the next article we will understand how to center an image vertically.
So, let us start our article now.
Step By Step Guide On CSS Center Image In DIV :-
In this article, we are going to understand how to center an image in div using CSS.
To center an image, we will use some CSS properties with some values to center an image.
Let us see the example below first.
<!DOCTYPE html>
<html>
<head>
<title> CSS tutorials </title>
<style>
#img1 {
display: block;
margin-left: auto;
margin-right: auto;
}
#img2 {
text-align: center;
}
</style>
</head>
<body>
<h1>
TalkersCode – CSS tutorials
</h1>
<h2>
CSS center an image in a div
</h2>
<img src="roads_trip.jpg" alt="Image" style="width:80%;" id=”img1”>
<div id=”img2”>
<img src="nature.jpg" alt="Nature" style="width:50%;" >
</div>
<p>
In this example, we used inline and internal CSS.
</p>
</body>
</html>
- As, here we see that we that in above example we show you an example in which HTML and CSS codes are used.
- Here, first of all, we create a basic structure of HTML, in which we use <!DOCTYPE html> which defines the type of document. And next one is our HTML tags. These tags are paired tags and all the data regarding HTML is written inside these tags.
- After we use our head tag which is again paired tag and contains the title and meta information of the webpage. The data written inside the head is not shown on the webpage.
- Now, next is our title tag which defines the title of the webpage. The tag which has its closing tag is known as a paired tag. So, this is again a paired tag.
- Now, next is the body which is the main tag of HTML. The data which we have written inside the body is shown on the webpage. Mostly all tags which are helpful to show data or information on the screen are written under the body tag.
- As, we here show how to center an image in div horizontally. There are many other ways with help of which we can center an image like margin auto, justify-content, and there are many other ways which we will discuss one by one in our next article. At last, we hope that you easily that how to center an image in div using CSS with help pf these steps.
Conclusion :-
At last, in conclusion, here we can say that with the help of this article we are able to understand CSS wrap text in div.
I hope this tutorial on CSS center image in DIV helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
