image alignment

<img src="" align="">

The align attribute of the IMG element specifies the alignment of an image.

<img src="example.gif" alt="Example" align="top">

Attribute Value Explanation
align=" " vertical alignment
top aligns to the top
middle aligns to the middle
bottom aligns to the bottom (default)
floats image
left the image floats to the left
(the text wraps to the right of the image)
right the image floats to the right
(the text wraps to the left of the image)

The use of this attribute is deprecated. (Use CSS instead)

Please see the "stopping text wrapping" when you specified the left or right.

Tips and Notes

Use CSS instead of deprecated HTML. Please see the "Related Document" for details on CSS.

Example

Aligns to the top

<p>
<img src="image/example.jpg" alt="Example" align="top">
Aligns to the top
<br>
The text aligns to the top of the image.
</p>
Output

Example Aligns to the top
The text aligns to the top of the image.

Aligns to the middle

<p>
<img src="image/example.jpg" alt="Example" align="middle">
Aligns to the middle
<br>
The text aligns to the middle of the image.
</p>
Output

Example Aligns to the middle
The text aligns to the middle of the image.

Aligns to the bottom

<p>
<img src="image/example.jpg" alt="Example" align="bottom">
Aligns to the bottom (Default)
<br>
The text aligns to the bottom of the image.
</p>
Output

Example Aligns to the bottom (Default)
The text aligns to the bottom of the image.

Aligns to the left

<p>
<img src="image/example.jpg" alt="Example" align="left">
Aligns to the left
<br>
The image floats to the left.
<br>
And the text wraps to the right of the image.
<br clear="left">
Clears the left
</p>
Output

Example Aligns to the left
The image floats to the left.
And the text wraps to the right of the image.
Clears the left

Aligns to the right

<p>
<img src="image/example.jpg" alt="Example" align="right">
Aligns to the right
<br>
The image floats to the right.
<br>
And the text wraps to the left of the image.
<br clear="right">
Clears the right
</p>
Output

Example Aligns to the right
The image floats to the right.
And the text wraps to the left of the image.
Clears the right