將一個div放在一個img上

Question

我有一個圖像庫，全部爲210px寬度，但是具有不同的高度。

我想在每個圖像上放置一個div框，其中包含單詞「coming soon」，具有純色背景色，高30px，寬度未知。 div盒需要垂直和水平居中。

我該如何解決這個問題？

我GOOGLE了，用盡了一切我能想到的，都沒有找到一個解決所有..

Answer 1

而不是使用圖像標籤，你能或者用一堆的DIV與畫廊圖像作爲背景圖？然後在該DIV中，只需放置文本並根據需要進行設置。

您可以使用文本樣式，寬度等創建CSS類。然後，只需使用DIV中的樣式屬性來設置背景圖像和高度。

Answer 2

answer by Patrick肯定是一個好方法，節省一些標記。

但是，如果您不能或不想讓圖像成爲容器的背景，您可以改爲使用一些定位選項。舉例來說，如果你能在「即將推出」部分的一定寬度的生活，你可以做這樣的事情：

ul { 
    list-style: none; 
    margin: 0 0 0 -2em; 
    padding: 0; 
} 

li { 
    position: relative; /* this makes it a containing block */ 
    float: left; 
    margin: 0 2em 2em 0; 
    padding: 0; 
} 

.msg { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -15px; /* assuming it's 30 pixels high, half */ 
    margin-left: -75px; /* assuming it's 150 pixels wide, half */ 
    width: 150px; 
    height: 30px; 
    line-height: 30px; 
    color: #fff; 
    text-align: center; 
    background: rgba(0,0,0,.8); /* almost black, f**k old browsers */ 
} 

HTML

<ul> 
    <li> 
     <img src="/images/meep.png" alt="" /> 
     <div class="msg">Coming soon.</div> 
    </li> 
</ul> 

注意，行高：30PX是所以文本將在容器中垂直居中，如果消息需要下到第二行，這實際上是不好的。在這種情況下，您需要將容器固定高度，可能會添加一些填充，然後使用更爲傳統的線高度（如1.2em）。但是，在這種情況下，您需要一些jQuery或其他東西來計算父容器的高度，以便獲得正確的「top：px」高度。