HTML and CSS Reference
In-Depth Information
5.2.6.6. Centering an image
Have you noticed that you can't horizontally center an image in the
browser window with the
align
attribute? The
middle
and
absmiddle
val-
ues center the image vertically with the current line, but the image is
horizontally justified depending on what content comes before it in the
current flow and the dimensions of the browser window.
You can horizontally center an inline image in the browser window, but
only if it's isolated from surrounding content, such as by paragraph, di-
vision, or line-break tags. Then, either use the
<center>
tag or use the
align=center
attribute or center-justified style in the paragraph or divi-
sion tag to center the image. For example:
Kumquats are tasty treats
<br>
<center>
<img src="pics/kumquat.gif">
</center>
that everyone should strive to eat!
Use the paragraph tag with its
align=center
attribute if you want some
extra space above and below the centered image:
Kumquats are tasty treats
<p align=center>
<img src="pics/kumquat.gif">
</p>
that everyone should strive to eat!
