CSS/HTML - 絶対位置指定画像のセンタリング

Question

私はかなり長い間これをしてきましたが、それを把握できていないようです。私は ".logo"クラスをどのように中心に置くのかと思っていましたか？

#wrap { 
    width: 960px; 
    height: auto; 
    min-height: 700px; 
    margin: 0 auto; 
} 

.logo { 
    background: url(../images/logo.png); 
    width: 269px; 
    height: 126px; 
    z-index: 1000; 
    position: absolute; 
}   

<div id="wrap"> 
    <div class="logo"></div> 
    <div id="nav"></div> 
</div> 

ありがとうございます！

Answer 1

私は、同じrightとleftプロパティを持つdivを作成divの中の私の物を置いて、どちらかの子供のためmargin-rightとmargin-leftプロパティを設定しますがautoまたはcenterにtext-align属性を設定するオブジェクト。これはほとんどのオブジェクトを集中させるはずです。

ところで、絶対配置には注意してください。それは醜いことができます。

Answer 2

バックグラウンド位置を追加するだけです。center center; と背景をよりよく定義する：

background-image: url() 
background-repeat: no-repeat; 
background-position: center center; // you can have top bottom left right as well 

Answer 3

いくつかの解決策があります。しかし絶対的なことについての言葉、「雌犬」です。

http://jsfiddle.net/UY2FC/4/

http://jsfiddle.net/UY2FC/3/

http://jsfiddle.net/UY2FC/1/

それぞれが同じ仕事をしていませんが、微妙な違いを持ちます。

Z-indexは何ですか？あなたは何かをマスクしていますか？

Answer 4

使用マージン：0 auto;

このロゴは、左右の余白の幅を「自動」に設定することで、水平方向の中央に配置されます。これは、固定幅のコンテナが絶対的な要素を保持していますのでCSS

例のCSS

  .logo{ 
       background: url(../images/logo.png); 
       width: 269px; 
       height: 126px; 
       z-index: 1000; 
       margin:0px auto; //or margin:0 auto; 
       } 

       } 

Answer 5

水平センタリングを達成するための好ましい方法である、あなたが実際に行うために必要なすべてが追加されます。

left: 50%; 
margin-left: -134px; 

を

to .logoとあなたは良いです。 margin-leftは絶対要素の幅の1/2でなければなりません。これは、あなたが水平な中心に行くことを前提としています。 Verticalはtop/margin-topと同様に機能しますが、固定の高さが必要です。