Centering image on css

Question

I am trying to make my logo center using the following codes..

It is in the header-container.

<div class="header-container">
    <div class="header">
    <h2 class="logo">
        <a href="www.www.com" title="scorpia" class="logo">
             <img src="headerbg.jpg" alt="scorpia">
        </a>
    </h2>
    </div>
</div>

.logo {}
.header-container {}
.header {  
    margin:0 auto; 
    padding:0px; 
    text-align:center; 
    position:relative; 
    z-index:10;
}
.header .logo { 
    display:block; 
    text-decoration:none !important; 
}
.header .logo strong { 
    position:relative; 
    top:-999em; 
    left:-999em; 
    width:0; 
    height:0; 
    font-size:0; 
    line-height:0; 
    text-indent:-999em; 
    overflow:hidden; 
}
.header h1.logo, .header h2.logo { 
    margin:0; 
}

This is the result I am getting.. As you can see it is a little towards the right enter image description here

Anyone know how could I fix this?

What part is the `.header`? You need to post the markup too. — styfle, Oct 24 '13 at 01:37
.header is the white space.. im sorry.. dont know what should i post — John, Oct 24 '13 at 01:38
specify width for the `.header` ,`width:1000px` will do for you — NullPoiиteя, Oct 24 '13 at 02:34
The problem is the image. Just open it alone and see what happens. — Havenard, Oct 24 '13 at 02:39

score 1 · Answer 1 · answered Oct 24 '13 at 01:48

Write your page like this.

You can also do a very convenient vertical centering with vertical-align:middle;

html

<div id="wrapper">
    <div id="container">
        <div class="header">
            <img class="logo" src="https://i.stack.imgur.com/0ligN.jpg" />
        </div>
        <div id="inner2" style=""></div>
    </div>
</div>

css

html, body {
    margin:0;
    height:100%;
}
body {
    display:table;
    width:100%;
}
#wrapper {
    display:table-cell;
   /* vertical-align:middle;*/
    height:100%;
    width:100%;
}
#container {
    height:100%; 
    width:70%;
    background:red;
    margin:0 auto;
}
.header {    
    width:90%;
    height:20%;
    background:black;
    margin:0 auto;
}
.logo {width:100%}

http://jsfiddle.net/TqaBM/

Thanks for your help! I added some new codes which would probably let you guys understand it easier.. — John, Oct 24 '13 at 01:51

score 0 · Answer 2 · edited Oct 24 '13 at 01:41

0

Try something like;

.header img {
     display:block;
     margin:0 auto;
     width:100%;
}

Ie applying the centering (margin:0 auto) to the actual image.

But a jsfiddle of your code would help :)

edited Oct 24 '13 at 01:41

Josh Crozier

233,099
56
391
304

answered Oct 24 '13 at 01:38

Jason King

104
1
13

What's a jsfiddle? I have no idea what other codes do i have to provide. Hmmm. Any advice? – John Oct 24 '13 at 01:41
How do you center something with `width:100%`? – Josh Crozier Oct 24 '13 at 01:41
Your code doesn't look complete thats all. What container/wrapper is it sitting in? @John without seeing the rest of the code I just assumed it was sitting in a wrapper or container with fixed dimensions. – Jason King Oct 24 '13 at 01:44
I added some new codes... – John Oct 24 '13 at 01:50
To center an image you add (margin:0 auto) to the img { } attribute selector. – Jason King Oct 24 '13 at 01:53

Centering image on css

2 Answers2