Dismiss Notice
Join Physics Forums Today!
The friendliest, high quality science and math community on the planet! Everyone who loves science is here!

CSS problem with element

  1. Jan 1, 2017 #1
    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!
     
  2. jcsd
  3. Jan 1, 2017 #2

    jedishrfu

    Staff: Mentor

  4. Jan 2, 2017 #3
    Because it is the img that you want to center.
     
  5. Jan 2, 2017 #4
    Draw a border around your div using
    Code (Text):

    #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
     
  6. Jan 2, 2017 #5

    QuantumQuest

    User Avatar
    Gold Member

    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.
     
  7. Jan 2, 2017 #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.
     
  8. Jan 2, 2017 #7

    jedishrfu

    Staff: Mentor

    I thought CSS could handle one specific tag via the ID attribute and multiple tags via the class attribute.
     
  9. Jan 2, 2017 #8
    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.
     
  10. Jan 2, 2017 #9
    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.
     
Know someone interested in this topic? Share this thread via Reddit, Google+, Twitter, or Facebook

Have something to add?
Draft saved Draft deleted



Similar Discussions: CSS problem with element
  1. Inline css (Replies: 1)

Loading...