垂直居中的圖像重疊文本

我正在一個垂直居中圖像的網站上工作。頁面上還有一個段落，我希望它位於圖片下方。我無法想出這樣做，並且當窗口被調整大小時，圖像與文本重疊。 http://jsfiddle.net/qkmuM/我的CSS是垂直居中的圖像重疊文本

img { 
    margin:auto; 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    width:100%; 
    max-width:900px; 
}

如何得到我想要的任何想法？謝謝。

來源

2014-02-08 user3052215

刪除display: absolute從img標籤，因爲該元素相對於其身體定位。

檢查fiddle

更新：我想我給你點，將圖片放置在中心和下面的段落。現在，改變它像

img { // To vertically align the image 
    margin: 0 auto; 
    display: table-cell; 
    max-width: 200px; 
    vertical-align: middle; 
} 
p { 
    text-align:center; 
}

JSFiddle

來源

2014-02-08 21:41:19 Praveen

在這種情況下，最好刪除無用的'top'，'left'，...屬性，不是嗎？ –

@HashemQolami吧。當OP有更多的項目時可能會有影響。現在我已經糾正它。 – Praveen

恕我直言，在第二種方法中使用'display：block;'更合適，更有語義。而'table-cell'在這裏沒有任何特別的好處。 –

您可以設置段落的頂部位置。

p { 
    position:relative; 
    top: Xpx //(set it according to your requirement) 
}

來源

2014-02-08 21:41:39 prashant

垂直居中的圖像重疊文本

回答

相關問題