How to Center an Image in HTML

PDF download Download Article
PDF download Download Article

Image alignment is an important skill to learn when coding webpages. Unfortunately, as code changes, some HTML tags are deprecated and are not recognized by all web browsers. Try these methods to center an image in HTML. If they don’t work, consider coding in Cascading Style Sheets (CSS).

Method 1
Method 1 of 2:

Aligning in Text

PDF download Download Article
  1. In HTML coding, you can center text, but you must identify image alignment with the word “middle.” An image is not a line element, so it is identified in relation to other elements.
  2. Use a paragraph tag to indicate that a text line is beginning. Start your tag with <p> then write your text.
    Advertisement
  3. gif”. Then include your image description by typing alt=”image description” .
    • The “src” section tells the web page the URL of the image.
    • The alt section tells the web page what it should be called.
  4. Type align=”middle”> This is the end of the image portion of your tag. [1]
  5. Then, close the tag with </p>. For example, your entire tag could look like this: <p>We’re learning about HTML. <img src=”dancingdogpicture.gif” alt=”dancing dog” align=”middle> Our example is complete. </p>
    6. Advertisement
Method 2
Method 2 of 2:

Aligning in a Center Tag

PDF download Download Article
  1. You can contain the image within that centered element. However, it will create extra spaces around your element.
  2. Begin by centering the element. Type <center>.
  3. Type <img src=”dancingdogpicture.gif” alt=”dancing dog” .
  4. Enter height=”200”width=”200”> or another size of your choice. This is the end of your image portion of the tag.
  5. For example, your entire tag would look like this:
    <center><img src=”dancingdogpicture.gif” alt=”dancingdog” height=”200” width=”200”></center>. [2]
    6. Advertisement


Community Q&A

Search
Add New Question
  • Question
    How do you align picture in middle/center in HTML 5?
    AD Developers
    Community Answer
    The align attribute of is not supported in HTML 5. Use CSS instead. For the image to align middle, top, or bottom use the CSS property vertical-align. For the image to align left or right use the CSS property float.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 13 Helpful 12
  • Question
    How do you align images vertically?
    Smat_A_Lot
    Community Answer
    The align tribute of HTML is not supported by in HTML5. So you should use CSS instead. So that you can align the middle, top, and sides of an image. To do this use the CSS property vertical-sign, which makes the image align to the left or right use the CSS property float.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 4 Helpful 6
  • Question
    i have to align the image without using CSS and center or align doesn't work.
    faith daniel
    Community Answer
    Use this code. You can either use this method or try putting the image in a container, like div with and style the container to align it's content to center.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 2 Helpful 12
Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
      Advertisement

      Tips

      Submit a Tip
      All tip submissions are carefully reviewed before being published
      Name
      Please provide your name and last initial
      Submit
      Thanks for submitting a tip for review!

      Warnings

      • Beware that both the align and center tags can become deprecated. This means that they will not be used in the future. Although there is no exact date when they will stop being used, eventually browsers will not recognize them and the codes will have to be updated to CSS or HTML5.
        Thanks
        Helpful 0 Not Helpful 1


      Advertisement

      You Might Also Like

      How to
      Insert Spaces in HTML
      How to
      Make a Picture Link in HTML
      Add a Background Image to a Website: Step-by-Step Tutorial
      4 Ways to Add a Link to a Picture
      How to
      Run a HTML File in Visual Studio Code
      How to
      Create a Simple Web Page with HTML
      How to
      Write HTML Code
      How to
      Run a HTML File
      How to
      Insert Images with HTML
      How to
      Change the Button Color in HTML
      Simple Ways to Find the Hex Code of Any Color on Your Computer
      How to
      Open HTM Files
      How to
      Resize iFrames in HTML
      How to
      Make a Birthday Card with HTML and CSS
      Advertisement

      References

      1. ↑ http://www.w3schools.com/tags/att_img_align.asp
      2. ↑ http://www.netmechanic.com/news/vol7/html_no10.htm

      About This Article

      In other languages
      Thanks to all authors for creating a page that has been read 178,214 times.

      Is this article up to date?

      Advertisement