在網頁設計中,經常需要在圖片下方添加一些配套文字,這就需要使用CSS來實現。
首先,我們需要將圖片和文字包裹在一個容器中,可以使用div元素。
<div class="container"> <img src="image.jpg" alt="圖片"> <p>這是一段圖片配套文字。</p> </div>
接下來,在CSS中設置.container的樣式,使用text-align屬性將圖片和文字水平居中,使用line-height屬性將文字垂直居中,并且使用margin屬性來控制圖片和文字之間的間距。
.container { text-align: center; line-height: 1.5; margin: 10px; } .container img { display: block; margin: 0 auto; }
最后,我們可以在CSS中加入一些樣式,以美化配套文字的字體、顏色、大小等效果。
.container p { font-family: Arial, sans-serif; color: #333; font-size: 16px; }
使用以上的方式,我們就可以方便地實現圖片下方配套文字的效果。