-1

次のコードを使用してロゴセンターを作ろうとしています..

ヘッダーコンテナにあります。

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

これは私が得ている結果です..ご覧のとおり、少し右に向かっていますここに画像の説明を入力

どうすればこれを修正できるか知っている人はいますか？

4

2 に答える 2

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/

于 2013-10-24T01:48:22.973 に答える