CSS/HTML - 定位絕對定位圖像

我已經在這個相當長一段時間了，似乎無法控制它。我想知道如何讓我的「.logo」類中心？CSS/HTML - 定位絕對定位圖像

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

在此先感謝！

來源

2012-04-12 D SPECIAL

你試過對齊：center; ？ – Soader03 2012-04-12 16:02:44

u意思是文本對齊：中心 – Ayyash 2012-04-12 16:04:37

如果你想標誌div居中刪除絕對位置並添加文本對齊：中心;如果您希望徽標圖像在div內居中，只需添加background-position：center center; – Ayyash 2012-04-12 16:06:20

我會創建一個right和left性質相同的一個div，把我對象在div，並且或者設置margin-right和margin-left屬性的子對象auto或text-align屬性設置爲center。這應該使大多數物體居中。

順便說一句，小心絕對定位。它會變得醜陋。

來源

2012-04-12 16:06:51

只需添加background-position：center center; 並更好地定義背景：

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

來源

2012-04-12 16:09:42 Ayyash

有一些解決方案。關於絕對的一個字，但它是'婊子'。

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

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

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

每個人做同樣的工作，但有細微的差別。

雖然，z-index是什麼？你在掩飾什麼？

來源

2012-04-12 16:17:00

使用餘量：0自動;

該徽標通過將其右側和左側邊距寬度設置爲「自動」而水平居中。這是實現水平居中用CSS的首選方式

例如CSS

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

       }

來源

2012-04-12 17:27:02 srini

既然你有一個固定的寬度容器保持絕對的元素，你真正需要做的就是添加：

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

爲.logo，你很好。左邊距應該是絕對元素寬度的1/2。這，假設你只是爲了一個水平中心。垂直方向的作用與頂部/邊緣頂部相似，但這需要固定的高度。

來源

2012-04-12 17:49:30 Brian

非常直截了當！ – jaysonragasa 2014-05-25 14:41:19

CSS/HTML - 定位絕對定位圖像

回答

相關問題