How to center an image within a div

Question

I'm attempting to center the logo within my header. I tried the display:block and margin:auto within my #site-title class, but it isn't working.

The link to the code is: http://pastebin.com/iNvhTSBL And the CSS is: http://pastebin.com/f5mPTjuU

I'm not sure what to do...maybe I'm not doing the CSS correctly?

Any help would be appreciated! The CSS was from a wordpress theme, just letting you all know.

Thank you!

Answer 1

Next time, post only the relevant code bits in your question. That makes it MUCH more likely people will bother to answer.

If this is the code you are referring to:

<div id="header">
            <div id="site-title">
                    <a href="http://www.panduzee.com/wordpress"><img src="http://i.imgur.com/ysxPP.jpg"></a>
            </div>
            <!-- other bits stripped for brevity -->
            <div class="clear"></div>
    </div>

and the css is this:

#header {
    border-bottom: 1px solid #dedfe0; 
    padding-bottom: 50px;
}
#site-title { 
    float: left; 
    width: 100%; 
    padding-right: 40px; 
    overflow: hidden; 
    line-height: 27px; 
    font-size: 23px; 
    display:block; 
    margin: auto;
}  
#site-title a {
    color: #333; 
    font-weight: bold; 
    text-decoration: none; 
}

Then you need to revise the css as follows:
1. remove the float: left from the site-title. Unecessary.
2. Note that your padding-right of 40px is going to cause problems with your width: 100%
3. Add text-align: center; to the site-title.
4. Add margin: 0 auto; to your site-title a

The following code will do what you want:

#header {
    border-bottom: 1px solid #dedfe0; 
    padding-bottom: 50px;
}
#site-title { 
    width: auto; 
    padding-right: 40px; 
    overflow: hidden; 
    line-height: 27px; 
    font-size: 23px;  
    text-align: center;
}  
#site-title a {
    color: #333; 
    font-weight: bold; 
    text-decoration: none; 
    margin: 0 auto;
}

Answer 2

将此添加到#site-title

text-align: center;

Answer 3

This should work:

#header {
width: 500px;
margin: 0 auto;
}
</style>
<div id="header">
<!-- div content here -->
</div>