在網頁制作中，經常會出現在圖片下面添加文字的情況，這樣可以更好地說明圖片的內容，增加網頁的可讀性和美觀度。而實現這個效果需要用到CSS。下面我們來學習一下如何使用CSS實現圖片下邊加文字的效果。
首先，我們需要準備一個帶有文字的圖片。可以使用HTML的![]()
標簽來插入圖片，同時為圖片加上一個包含文字的
標簽，如下所示：
<div class="picture"> <img src="picture.jpg" alt="圖片"> <p>這是一張美麗的風景圖片</p> </div>接著，我們為這個
標簽添加CSS樣式。首先，我們需要將該標簽的顯示方式設置為“相對定位”，以便后續可以用“絕對定位”來定位文字。同時，我們還需要將該標簽的高度設置為圖片的高度，以便后續在縱向方向上對文字和圖片進行布局。代碼如下：
.picture {
position: relative;
height: 300px;
}然后，我們為標簽添加樣式，使其能夠在圖片下方居中顯示。我們可以使用“絕對定位”和CSS中的“transform”屬性來實現這一效果。代碼如下：
.picture p {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
text-align: center;
width: 100%;
margin: 0;
}此時，我們已經完成了圖片下方添加文字效果的實現。當然，為了使頁面更美觀，我們還可以在CSS中為圖片和文字加上陰影、邊框等樣式，來增加網頁的美感。
總結起來，使用CSS實現圖片下方添加文字的效果需要將包含圖片和文字的標簽設置為相對定位，并將
標簽設置為絕對定位。同時，需要用CSS中的transform屬性和文本排列屬性來對文字進行布局。通過這些操作可以讓我們的網頁看起來更加美觀和易讀。