Simple question

Get Started
1

In a web page a insert an image with the html code <img src=“…”/> .
How can I align the image in the center of the webpage ? html or css?

Thank you

2

simple answer

  1. set the width of the element containing the <img> to the width of the image

  2. set the left and right margins of the container element to auto.

3

I know it’s old school… what, with HTML5 and CSS and everything, but the last time I checked, the center tags still worked.

<center><img src="..."/></center>
4

yep, but depending on which DOCTYPE you use, they could be deprecated

5

There are various options.
If you put the image in a <div> then you can set text-align:center on the div - that is probably the easiest and most appropriate way.

6

yes it is the easiest but I disagree :disagree: it is the most appropriate because images are not technically text and so semantically it is incorrect imho.

7

Well that’s one way of looking at it. Another is that inline images are text replacements (which is why they have alt text), and so can be treated as text for this purpose if that is the easiest way of doing it :cool:

I’m not saying there’s a definite right way and a definite wrong way - I’m just trying not to make it any more difficult than it needs to be!

8

I’m not sure that all images can be argued to be text replacements, but I suppose it depends on the context of the image.

I thought the purpose of the alt text is to simply provide a brief description of the image for screen readers or to be displayed on the screen when the image is not available for some reason.

I’m happy to just simply agree to disagree on this one, it’s not a big deal really :slight_smile:

9

Simply we can align the image into center.

To wrap the image with the use of a div and align that image into center.
To wrap the image with the help of a div and give a class to that div, then text align center.

10

Images are “replaced elements” thus the ALT attribute (when on a standard IMG) provides a ‘short description’ of the inline image when the image is ‘unavailable’. Thus with a decorative image the null value alt=“” is applied.

Albeit CSS is the most apt way to align the ‘image’ regardless of whether it is a functional or decorative.