With HTML 4, you can horizontally center an image in a paragraph
using <p align="center">. E.g., the
image in the following paragraph would be cenered on the web page:
<p align="center">
<img src="f2a046-10-gld_320x240.jpg" alt="F2A046-10-GLD Printer Cable"
width="320" height="240">
</p>
However, with
HTML5, use of the align parameter for horizontally aligning
a paragraph on a web page has been deprecated. E.g., if you check your HTML
code for adherence to the HTML 5 standard with the
Nu Html Checker provided by the
World
Wide Web Consortium, you will see an error similar to the following
one displayed if you are using align with the p (paragraph) tag.
The align attribute on the
p
element is obsolete.
Use CSS instead.
From line 73, column 1; to line 73, column 18
tent -->↩↩<p align="center">↩<img src
The image can be centered within the paragraph, but with the code
being HTML 5 compliant using a
Cascading Style Sheets method instead by using a
style that includes display: block; and margin: auto;
with the image tag. E.g., the picture in the above example could be centered
within the paragraph and the page using the code below:
<p>
<img src="f2a046-10-gld_320x240.jpg" alt="F2A046-10-GLD Printer Cable"
width="320" height="240" style="display: block; margin: auto;">
</p>
Or I could include the following style section in the HEAD
section of the HTML code for the webpage, if I wanted to apply that style
to certain images on the page.
<style type="text/css">
img.centered { display: block; margin: auto; }
</style>I could then apply that class to any img tag in a
page where I wanted images within a paragraph to be centered within the
paragraph.
<img class="centered" src="example.jpg" alt="An example image" width="200" height="200">