CSS中可以使用相對定位(relative positioning)或***定位(absolute positioning)將文字放置在圖片下方。
相對定位是相對于元素在文檔流中的位置進(jìn)行定位,而***定位是相對于瀏覽器窗口進(jìn)行定位。
下面是一個使用相對定位將文字放置在圖片下方的示例:
<div style="position: relative;"> <img src="image.jpg" alt="圖片"> <p style="position: relative; top: 10px;">文字</p> </div>
在這個示例中,圖片和文字都包含在了一個相對定位的div元素中,由于圖片和文字的相對位置不變,所以可以使用top屬性將文字向下移動10像素,從而放置在圖片下方。
如果需要讓文字始終保持在圖片下方,無論圖片大小如何變化,可以使用***定位來實現(xiàn):
<div style="position: relative;"> <img src="image.jpg" alt="圖片"> <p style="position: absolute; bottom: 0; left: 0;">文字</p> </div>
在這個示例中,文字被***定位在了圖片的下方和左側(cè),無論圖片大小如何變化,文字都會保持在圖片的下方,可以根據(jù)需要調(diào)整left屬性來調(diào)整文字的左右位置。