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

  • HTML/CSS
  • Thread starter kolleamm
  • Start date
  • Tags
    Css Element
In summary, the conversation discusses the use of CSS to center an image on a webpage. The code for using a box ID to center the image is successful, but using an img ID is not. It is suggested that this may be due to a precedence issue in CSS and that using the img ID may center all images rather than a specific one. It is also mentioned that CSS allows for targeting specific elements through the use of ID and class attributes. However, it is noted that the img ID may have different properties that could affect its functionality in centering an image.
  • #1
kolleamm
477
44
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!
 
Technology news on Phys.org
  • #3
kolleamm said:
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.
 
  • #4
Draw a border around your div using
Code:
#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
 
  • #5
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.
 
  • #6
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.
 
  • #7
I thought CSS could handle one specific tag via the ID attribute and multiple tags via the class attribute.
 
  • #8
jedishrfu said:
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.
 
  • #9
kolleamm said:
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.
 

FAQ: Why does the img ID not work in this CSS code?

1. Why is my element not displaying properly with CSS?

There could be several reasons for this issue. Check to make sure that the CSS selector you are using is targeting the correct element. Also, check for any typos or missing characters in your CSS code. Additionally, make sure that the element has the correct CSS properties and values applied to it.

2. How can I fix a CSS problem with an element overlapping another element?

This can be solved by using the CSS z-index property to control the stacking order of elements. Elements with a higher z-index value will appear on top of elements with a lower z-index value. You can also try adjusting the position property of the overlapping elements.

3. Why is my CSS not applying to a specific element?

First, check that the element in question is correctly targeted by the CSS selector. If it is, then check for any conflicting CSS rules that may be overriding your desired styles. You can also use the browser's developer tools to inspect the element and see which CSS rules are being applied to it.

4. How can I center an element with CSS?

To center an element horizontally, you can use the CSS margin property and set the left and right margins to auto. To center an element vertically, you can use display: flex and align-items: center on the parent container.

5. Why is my CSS not working on a specific browser?

Different browsers have their own rendering engines and may interpret CSS code differently. Make sure to use browser-specific CSS prefixes (such as -webkit- or -moz-) for properties that are not fully supported by all browsers. You can also use a CSS reset or normalize file to ensure consistent styling across browsers.

Similar threads

Replies
10
Views
1K
Replies
5
Views
523
Replies
9
Views
2K
Replies
5
Views
429
Replies
1
Views
2K
Replies
2
Views
1K
Replies
2
Views
1K
Replies
14
Views
2K
Replies
3
Views
2K
Replies
2
Views
1K
Back
Top