Trying to center an image via CSS

StackOverflow https://stackoverflow.com/questions/23391908

Pergunta

I'm trying to center this image by place it really center of the page but it always seems to be more towards the left.

What part am I missing or which part should I cut out? Thanks

Here's my Code:

<body>
<div id="container">
    <div id="thumbnail"><img src="tilden regional park.jpg" /></div>
    <div id="heading">Tilden Regional Park</div>
</body>

Here's my CSS:

    body {
      font-family:  Open Sans, Arial, Verdana;
      margin: 100px 100px 100px 100px;
      text-align: center;
    }

    #container {
      width:960px;
      margin-left: auto;
      margin-right: auto;
      padding: 30px 0px;
    }

    #thumbnail {
      height: 500px;
      width: 500px;
    }

    #thumbnail img {
      display: block;
      margin-left: auto;
      margin-right: auto;
      height: 100%;
      width: 100%;
    }
Foi útil?

Solução 

<div id="container">
    <div id="thumbnail"><img src="https://www.google.co.uk/images/srpr/logo11w.png" /></div>
    <div id="heading">Tilden Regional Park</div>
</div>

The only required styles are:

#thumbnail {
    height: 500px;
    width: 500px;
    margin: 0 auto;
}
#thumbnail img {
   height: 100%;
   width: 100%;
}

You need to add auto margins to the element you want centred, this will be #thumbnail not the image itself, because the image has 100% width and height.

http://jsfiddle.net/F3337/

Outras dicas

Remove margins from #container and add margin: 0 auto to #thumbnail. There's also no need for the margin statement on the body.

Debugging is easier by assigning colours to the divs.

You missed to add "margin: 0 auto" to the id thumbnail, not the img ! so :

#thumbnail {
   height: 500px;
   width: 500px;
   margin: 0 auto;
}

#thumbnail img {
   display: block;
   height: 100%;
   width: 100%;
}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top