HTML/CSS Why does the img ID not work in this CSS code?

[kolleamm]

The following code works successfully and centers my image on the page (CSS)
#box {
display: block;
margin: 0 auto;
}

This one does not (CSS)
img {
display: block;
margin: 0 auto;
}

HTML
<div id="box">
<img src="title.png" style="width:40%">
</div>

I'm confused why it doesn't work. The HTML code stays the same in both cases. Why do I have to use img and not use the box id in the CSS code?

Thanks in advance!

 

[jedishrfu]

I think this may be a precedence issue in which CSS attributes have priority.

This reference talks about this with h1 tags

http://www.w3schools.com/css/css_howto.asp

 

[forcefield]

The following code works successfully and centers my image on the page (CSS)

Why do I have to use img and not use the box id in the CSS code?

Because it is the img that you want to center.

 

[JorisL]

Draw a border around your div using

#box {
border: 2px solid black;
}

It's possible you'll see that the div's size is adapted to the image. Is this part of a larger page? Because CSS can become a tangled mess real quick especially with the cascading rules that aren't very clear unless you specifically look into them.

Oddly this does seem to work in my browsers (firefox 55 and chromium) :S

 

[QuantumQuest]

The important role of CSS is to create containers of HTML elements, give them the properties we need and follow inheritance rules, from outer to inner space of a region of a webpage - that eventually extends through different regions to the whole webpage, in order to give the look / embellishments to the HTML elements we want. So, you first create a skeleton i.e. an outer container and you gradually include other containers, depending on the depth level you want to give and the idea you want to accomplish.

In the old pre - CSS era, we were doing this using tables for the alignment of HTML elements - a poor hack, browser dependent and non portable solution. Now, thanks to CSS, there's absolutely no need for HTML to mess with the appearance of a site.

 

[kolleamm]

I don't mind using the img ID, however if I wanted to center a single specific image there might be a problem doing it directly from CSS since the img ID would center all of them.

 

[jedishrfu]

I thought CSS could handle one specific tag via the ID attribute and multiple tags via the class attribute.

 

[kolleamm]

I thought CSS could handle one specific tag via the ID attribute and multiple tags via the class attribute.

It can but I'm thinking the problem is that the img ID is not really a true ID attribute and has some different properties.

 

[forcefield]

It can but I'm thinking the problem is that the img ID is not really a true ID attribute and has some different properties.

Do you understand how your div element is referenced from the CSS ? You can do the same with the img element.
Not sure if it makes sense in your case though.