All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

How To Center An Image In HTML

Last Updated : Mar 11, 2024

How To Center An Image In HTML

In this tutorial we will show you how to center an image in HTML, in HTML, sometimes developers need to center an image for their webpages and get some difficulties regarding this. That how we able to do that about positions of images and gets confused.

So, today we will teach you that how you are able to center an image in html and we hope that with the help of our codes that given you understand properly that how image is centered.

Step By Step Guide On How To Center An Image In HTML :-

As, there are many ways to center an image in HTML. But we will teach you the easy one. And that one is effective in all cases, as you use image in div tags and paragraph tags etc.

Here, in next we will specify you the two ways that how you able to center an image in html, both are different and can be used in any condition.

We hope that you will understand that how you are able to do this, after the example of codes , we will also tell you that how it works.

<!DOCTYPE html>
      <html>
        <head>
          <title> Title of the document<title>
        </head>
          <body>
	<p style="text-align:center">
        <img src="source" alt="" width="200px" height="200px">
    </p>
    <div>
        <img src="source" alt=""  style="width: 300px;height:300px;margin: auto;display: block;">
    </div>
          </body>
      </html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. 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.
  4. Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. Hence, here we use two tags, first one in paragraph and other is division.
  5. In both, the properties like width and height must be given. In paragraph, we give text-align center so that the image tag that placed inside paragraph automatically aligned in center position because it acts like a content in paragraph.
  6. Whereas other side, the division tag is used and in this we give CSS properties to image. This method can also be used to align text center.
  7. Here, we give margin auto and display block property, because with this property the image automatically sets its margin same from both side and with this effect, the image comes into center of the webpage.
  8. There is also articles for center an image in webpage but vertically, we hope that if you want to center an image vertically, then you must go through that article.
  9. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

In conclusion, after reading this article you may able to center an image horizontally and we also hope that you may understand that how we do that, because our codes are well defined and simple also.

I hope this tutorial on how to center an image in HTML helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪