如何在css中的圖像下添加一個類似文本的標題

Question

嗨，我想在圖像的底部中心添加文字。它的照片庫項目，因此所有的圖像都是不同的尺寸。 CSS需要與百分比工作，所以它適用於所有的圖像尺寸

<div class="images"> 
    <img src="dummy.jpeg"> 
    <p>Some text to appear> 
</div> 

我試着讀計算器上的很多問題，但是所有的人都適用於一個圖像。我有不同尺寸的多個圖像。

我想將文本放在圖像的底部中心，黑色條帶在圖像上寬度爲100％。它可能是文字背景。

Answer 1

使用絕對定位的標題<p>
使容器inline-block
小提琴：jsfiddle.net/eohtwd1u

.images { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.images p { 
 
    position: absolute; 
 
    width: 100%; 
 
    text-align: center; 
 
    bottom: 0; 
 
    left: 0; 
 
}

<div class="images"> 
 
    <img src="https://placehold.it/350x150"> 
 
    <p>Some text to appear</p> 
 
</div>

Answer 2

您可以使用CSS Flexbox的。並且爲每個圖像底部的文本使用position: absolute並使您的父母position: relative。

在下面的代碼片段看一看：

.images { 
 
    display: flex; 
 
    padding: 5px; 
 
} 
 
.img-holder { 
 
    position: relative; 
 
    margin: 5px; 
 
    align-self: flex-start; 
 
} 
 
.img-holder p { 
 
    position: absolute; 
 
    bottom: 10px; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    width: 100%; 
 
    text-align: center; 
 
    margin: 0; 
 
}

<div class="images"> 
 
    <div class="img-holder"> 
 
    <img src="http://placehold.it/100x100"> 
 
    <p>Some text</p> 
 
    </div> 
 
    <div class="img-holder"> 
 
    <img src="http://placehold.it/120x120"> 
 
    <p>Some text</p> 
 
    </div> 
 
    <div class="img-holder"> 
 
    <img src="http://placehold.it/150x150"> 
 
    <p>Some text</p> 
 
    </div> 
 
</div>

希望這有助於！

Answer 3

             
  
 
   
 
    
<!-- comment to fool the edit limiter --> 
 

 
img{ 
 
    width:500px; 
 
    height:200px; 
 
    } 
 
.images{ 
 
    width:500px; 
 
    height:200px; 
 
    align-items:center; 
 
    position:relative; 
 
    
 
    } 
 
p{ 
 
    position:absolute; 
 
    bottom:0; 
 
    color:yellow; 
 
    left:50%; 
 
    } 
 
span{ 
 
    position: relative; 
 
    left: -50%; 
 
    }
 
    
<div class="images"> 
 
    <img src="https://i.stack.imgur.com/wwy2w.jpg"> 
 
    <p><span>Some text to appear></span></p> 
 
</div>