不能把保證金在圖像上

我正在做一個WordPress的網站。並在導航下，我有容器（id =「cover_photo」）圖像（id =「cover_photo_image）。我居中它的邊緣，但我想要將它下移，並將其居中在容器中，但容器後跟如果我把保證金就可以了。不能把保證金在圖像上

HTML

<div id="cover_photo"> 
     <p id="cover_photo_image"> 
     </p> 
    </div>

CSS

#cover_photo { 
    width: 100%; 
    height: 278px; 
    background-color: #6b0c0b; 
    box-shadow: inset 0px 0px 3px 0px #888, 0px 0px -3px 0px #888; 
} 

p#cover_photo_image { 
    width: 821px; 
    height: 172px; 
    display: block; 
    margin: 0 auto; 
    margin-top: 6px; 
    background-image: url(images/cover_photo.png); 
}

來源

2012-12-02 rallybilen

有爲什麼您使用的，而不是一個'img'age元素的'p'aragraph一個很好的理由？除此之外，嘗試將所有邊距粘貼到一個單獨的規則中：'margin：6px auto 0;' – Zeta

是否要垂直居中放置圖像？ –

你可以給我們一個截圖嗎？你想通過對中，垂直和水平對中來達到什麼目的？ – Michelle

屁股代碼爲小提琴，看到你的意思。問題是，你沒有設置定位爲#cover_photo或#cover_photo_image。外部元素需要是相對的，內在需要是絕對的。

#cover_photo { 
position: relative; 
} 

p#cover_photo_image { 
position: absolute; 
}

我改變了尺寸，因此將融入預覽，如果你嘗試調整邊距值應該到處移動，而不是移動#cover_photo容器。

http://jsfiddle.net/ESCNm/

以防萬一你正在尋找一個元素內自動垂直和水平對齊的元素，也有很多更多的方法是手動定位。手動定位是一件麻煩事，我儘可能避免絕對。

這裏關於它的文章：http://www.vanseodesign.com/css/vertical-centering/

來源

2012-12-02 10:38:18 Michelle

感謝您的回答。它的工作，但我同意絕對，他們使一切混淆到底;） – rallybilen

不能把保證金在圖像上

回答

相關問題