CSS problem with element

  • Thread starter kolleamm
  • Start date
  • #1
391
35
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!
 

Answers and Replies

  • #3
141
3
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
489
189
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
QuantumQuest
Science Advisor
Insights Author
Gold Member
926
485
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
391
35
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
12,023
5,674
I thought CSS could handle one specific tag via the ID attribute and multiple tags via the class attribute.
 
  • #8
391
35
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
141
3
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.
 

Related Threads on CSS problem with element

  • Last Post
Replies
17
Views
687
  • Last Post
Replies
19
Views
958
Replies
3
Views
770
  • Last Post
Replies
11
Views
2K
  • Last Post
Replies
0
Views
3K
  • Last Post
Replies
1
Views
1K
  • Last Post
Replies
3
Views
59K
  • Last Post
Replies
9
Views
739
Replies
13
Views
2K
Top