如何將文字放在圖像的底部（寶麗來圖像）

我正在努力使像寶麗來的圖像。圖片底部有文字。我嘗試了所有的指令，但都沒有這樣做。如何將文字放在圖像的底部（寶麗來圖像）

這裏是我的HTML代碼

<div id="Places" class="gallery"> 
     <ul> 
      <li> 
       <a href="https://www.w3schools.com/css/css_image_gallery.asp" target="_blank"> 
        <img src="images/babot1.jpg" alt="bobat1"> 
       </a> 
      </li> 
      <li> 
       <a href="https://www.w3schools.com/css/css_image_gallery.asp" target="_blank"> 
        <img src="images/lhouse1.jpg" alt="bobat1"> 
       </a> 
      </li> 
      <li> 
       <a href="https://www.youtube.com/playlist?list=PL6n9fhu94yhVm6S8I2xd6nYz2ZORd7X2v" target="_blank"> 
        <img src="images/babot1.jpg" alt="bobat1"> 
       </a> 
      </li> 
     </ul> 
</div>

，這是我的CSS代碼，我使用

div.gallery{ 
border:2px solid #ddd; 
margin:0 auto; 
margin-top:100px; 
margin-bottom:30px; 
border-radius:3px; 

width:98%; 
} 
div.gallery::before{ 
content: ""; 
clear: both; 
display: table; 
} 
div.gallery ul{ 
list-style-type:none; 
overflow:hidden; 
margin:0 auto; 
} 
div.gallery li a img { 
margin: 20px 20px 21px 20px; 
width: 28.50%; 
float:left; 
padding-bottom:50px; 
}

編輯1：這裏是我得到了什麼樣的照片。

來源

2017-05-18 Vian Ojeda Garcia

它是如何失敗？進入更多細節。不要只是轉儲代碼。 – zero298

@ zero298文字走出圖片。生病編輯帖子並添加一些照片。 –

<figure> + <figcaption>是爲此設計的。

爲了使它像寶麗來，這裏就是我想要做的：

figure { 
 
    border: 1px solid #f5f5f5; 
 
    border-radius: 5px; 
 
    padding: 10px; 
 
    display: inline-block; 
 
    box-shadow: 0 4px 5px -2px rgba(0,0,0,.2), 0 7px 10px 1px rgba(0,0,0,.14), 0 2px 16px 1px rgba(0,0,0,.12); 
 
} 
 
figure img { 
 
    display: block; 
 
} 
 
figcaption { 
 
    display: block; 
 
    padding: 1rem 0 .5rem; 
 
    color: #777; 
 
}

<figure> 
 
    <img src="http://placehold.it/350x250" /> 
 
    <figcaption>This would be a caption</figcaption> 
 
</figure> 
 
<figure> 
 
    <img src="http://placehold.it/250x350" /> 
 
    <figcaption>This would be another caption</figcaption> 
 
</figure>

請注意你目前浮動<img>標籤。如果你想工作上面，你需要從當前的CSS刪除以下：

div.gallery li a img { 
    margin: 20px 20px 21px 20px; 
    width: 28.50%; 
    float:left; 
    padding-bottom:50px; 
}

您可以浮動的<figure>！而非。

來源

2017-05-18 23:44:46

太棒了！該工作完美。你能解釋我做錯了什麼，以及這個代碼與我的不同嗎？如果它不麻煩。 –

你正在浮動你的圖像。將它們放置在容器的左側，並告訴其餘內容在它們周圍流動。爲了更好地理解浮動，你可能應該[閱讀]（https://css-tricks.com/all-about-floats/） –

有一個HTML標籤做你想做什麼：

<figure> 
 
    <img src="myImage.jpg" alt="my image"> 
 
    <figcaption>This is my image</figcaption> 
 
</figure>

來源

2017-05-18 23:36:30

其結果相同 –

-2

把你的文字一個div裏面，位置也絕對給它的90的z-index或更高。

<div id="txt">This is a title</div> 

<style> 
    position: absolute; 
    z-index: 99; 
</style>

來源

2017-05-18 23:36:38

這是我見過的最懶惰的答案。 – Zak

如何將文字放在圖像的底部（寶麗來圖像）

回答

相關問題