html - 在 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

像这样写你的页面。

您还可以使用非常方便的垂直居中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/

Answer 2

尝试类似的东西；

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

margin:0 auto即对实际图像应用居中 ( )。

但是你的代码的jsfiddle会有所帮助:)