CSS中可以使用相對(duì)定位(relative positioning)或***定位(absolute positioning)將文字放置在圖片下方。
相對(duì)定位是相對(duì)于元素在文檔流中的位置進(jìn)行定位,而***定位是相對(duì)于瀏覽器窗口進(jìn)行定位。
下面是一個(gè)使用相對(duì)定位將文字放置在圖片下方的示例:
<div style="position: relative;"> <img src="image.jpg" alt="圖片"> <p style="position: absolute; bottom: 0; left: 0;">文字</p> </div>
在這個(gè)示例中,圖片和文字都包含在了一個(gè)相對(duì)定位的div元素中,圖片在文檔中正常顯示,而文字則被設(shè)置為***定位,并且距離底部和左側(cè)都為0,這樣文字就會(huì)顯示在圖片的下方。
需要注意的是,***定位的元素會(huì)脫離文檔流,不再占用原來(lái)的位置,在使用***定位時(shí),需要特別注意其他元素的布局和樣式。
CSS中還有其他一些屬性可以用來(lái)調(diào)整文字的位置和樣式,比如vertical-align、text-align等,這些屬性也可以用來(lái)將文字放置在圖片下方,使用相對(duì)定位和***定位可以更加靈活地控制文字的位置和布局。