Центрирование изображения на css

Question

Я пытаюсь сделать свой центр логотипа, используя следующие коды.

Это в контейнере-заголовке.

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

Это результат я получаю .. Как вы можете видеть, что это немного в сторону правого

Любой знает, как я могу это исправить?

Answer 1

Попробуйте что-нибудь наподобие;

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

Т.е. применяя центрирующий (margin:0 auto) до фактического изображения.

Но jsfiddle вашего кода поможет :)

Answer 2

Написать свою страницу, как это.

Вы также можете сделать очень удобный вертикальный центрирование vertical-align:middle;

HTML

<div id="wrapper"> 
    <div id="container"> 
     <div class="header"> 
      <img class="logo" src="http://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/