CSS/HTML - Zentrieren Absolutes positioniertes Bild

Question

Ich bin schon eine ganze Weile dabei und kann es scheinbar nicht in den Griff bekommen. Ich habe mich gefragt, wie ich meine ".logo" -Klasse zentrieren könnte?

#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> 

Vielen Dank im Voraus!

Answer 1

würde ich eine div mit den right und left Eigenschaften die gleichen sind, legte meine Objekte in der div erstellen und entweder setzen die margin-right und margin-left Eigenschaften für das Kind zu auto Objekte oder stellen Sie die text-align Attribut center. Dies sollte die meisten Objekte zentrieren.

BTW, sei vorsichtig mit der absoluten Positionierung. Es kann hässlich werden.

Answer 2

einfach background-position hinzufügen: center center; und definieren Sie den Hintergrund besser:

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

Answer 3

Es gibt einige Lösungen. Ein Wort über absolute, aber 'Schlampe' ist es.

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

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

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

jeder tut die gleiche Arbeit, aber mit feinen Unterschiede.

Obwohl, was ist mit Z-Index? maskieren Sie etwas?

Answer 4

margin verwenden: 0 auto;

Dieses Logo wird horizontal zentriert, indem die Breite des rechten und linken Rands auf "auto" gesetzt wird. Dies ist die bevorzugte Art und Weise mit CSS horizontale Zentrierung zu erreichen

Beispiel css

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

       } 

Answer 5

Da Sie eine feste Breite Container das absolute Element halten haben, alles, was Sie wirklich tun müssen, ist hinzuzufügen:

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

zu .logo und du bist gut. Der Rand links sollte 1/2 der absoluten Elementbreite sein. Dies vorausgesetzt, Sie gehen nur für ein horizontales Zentrum. Vertikal würde ähnlich wie oben/unten funktionieren, aber das würde eine feste Höhe erfordern.