In this tutorial we will show you the solution of center image in div vertically and horizontally and how to center an image in div both vertically and horizontally.
In our previous sessions, we already discussed about how to how to insert an image in html and like how to insert caption with image, text and image side by side responsive.
If you want to learn about these, you can visit to our articles. Now, let us discuss about our today’s article.
Step By Step Guide On Center Image In DIV Vertically And Horizontally :-
As, we already discussed about to insert image in a div or say in html/webpage. There are many ways with the help of which you are able to align image in center.
There is a code in html that is given below, here you will see how to done this.
<!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>Document</title> </head> <body> <div style="border: 2px solid red;text-align: center; width: 1020px; height: 600px; position: absolute;"> <img src="images/4.jpg" alt="" style="height: 500px; width: 500px; position: relative; top: 50%;margin-top: -250px;"> <div style="border: 2px dashed blue; text-align: center; width: 1020px; height: 600px; position: absolute;"> <img src="images/6.jpg" alt="" style="height: 300px; width: 300px; position: relative; top: 50%;margin-top: -150px;"> </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 <head> tag is used to contain information about 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, <body> tag is used to define the webpage body. All the contents to show on website are written here.
- Here, in body we create two div tags and their heights and widths are same as you see in codes. Now, let’s talk about both one by one.
- In first div, we use width, height, border, position and text-align. We hope you understand about width, height and border. Position is used here with value center. So, image with CSS remains in div and text-align center is used to align image center horizontally. This concept is same in both div’s.
- In case of image, we use src and style. And in style we give image width, height with position relative and top 50%, margin-top = -250px. In this case, top is used to give margin 50% from top whereas the margin-top decrease the extra margin or say space which is due to height of image. You see when you don’t use margin top the upper margin is greater than bottom. This is due to area covered by height of image. So, we decrease this extra margin and image comes in center.
- In second case, all is same as first division. But the width and height of image gets changed. Due to this change the margin-top changes. It is always half of height of images. So, here it is 150px because the height of image is 300px. So, it decrease the extra margin which is due to height of image. And the image gets aligned at center vertically and horizontally
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
At last, here we can say that with the help of this article we are able to center an image in div vertically and horizontally. I hope this tutorial on center image in div vertically and horizontally helps you.
