What is the correct way to center a picture using html?

Question

I have an image I need to put in the center of the page and I'm still not quite sure how to do that. This is just my first class that showed very rough html so I don't know what exactly I'm supposed to put.

Answer 1

It depends on your document type and what you are putting the image inside. Note that the "align" attribute of the <img> tag is outdated and there are several better options:

The best way is inside a <div> element, where you control the alignment in the div tag:

<div style="vertical-align: middle;text-align:center;" ><img src="your-image-file.gif" alt="" /></div>

If you need more space around it, you can either use margins in the style tag or set the div style width and height attributes:

<div style="vertical-align: middle;text-align:center;margin: 50px 50px 50px 50px" ><img src="your-image-file.gif" alt="" /></div>

<div style="vertical-align: middle;text-align:center;width:100%;heig... ><img src="your-image-file.gif" alt="" /></div>

If you want some text to wrap around it, use either float:left or float:right in the div style.

Another option, although a bit more limited, is to simply add the style attribute to your <img> tag:

<img style="margin: 50px 50px 50px 50px" src="your-image-file.gif" alt="" />

Finally, if your image is already in a table cell, you can simply add the style to the <td> tag and adjust the width/height of the cell if needed:

<td style="vertical-align: middle;text-align:center;" ><img src="your-image-file.gif" alt="" /></td>

Answer 2

Assuming you mean actual HTML, and not CSS, then it's <img src="PIC" align="center" />

Answer 3

Well, assuming that you are using XHTML, <center> tag is outdated for some "doctype"s. You can do the following:

1. Take the image inside a <td> of a table and make the alignment of the <td> to "center".

E.g.

<table id="maintable" border="0" cellspacing="0" cellpadding="0" width="100%">

<tr><td>[Something.....]</td><td style="text-align:center"><img src="mypic.gif" alt="[mypic]".... /></td></tr></table>

Answer 4

<center><img src="url"></center>