CODEWITHSUNDEEP
csswordpresshtmlheadercenter
Richard
Richard

Reputation: 826

How to center an image within a div

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!

Upvotes: 0

Views: 1974

Answers (3)

enbits
enbits

Reputation: 66

This should work: 

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

Upvotes: 0

random_user_name
random_user_name

Reputation: 26170

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;
}

Upvotes: 1

John Conde
John Conde

Reputation: 219884

Add this to #site-title

text-align: center;

Upvotes: 0

Related Questions