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

Я хотел бы создать div с right и left свойств же, клад объектов в DIV, а также установить margin-right и margin-left свойства для дочерних объектов для auto или установить атрибут text-align в center. Это должно сосредоточить большинство объектов.

BTW, будьте осторожны с абсолютным позиционированием. Это может стать уродливым.

Answer 2

просто добавьте background-position: 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

использование margin: 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; 

.logo, и вы хороши. Левая граница должна быть 1/2 от ширины абсолютного элемента. Это, если вы собираетесь только на горизонтальный центр. Вертикаль будет работать с верхним/верхним краем, но для этого потребуется фиксированная высота.