在網頁設計中,一張圖片帶有一段文字描述是很常見的。如果想要讓這段文字居中在圖片下面,可以通過 CSS 樣式來實現,下面我們來看一下實現方法。
img { display: block; /* 將圖片轉換為塊狀元素 */ margin: 0 auto; /* 設置圖片水平居中 */ } p { text-align: center; /* 將文字居中 */ margin-top: 10px; /* 設置文字距離圖片的距離 */ }
以上代碼中,display: block;
將圖片轉換為塊狀元素,使得圖片可以接下來的文字可以在同一個容器內。margin: 0 auto;
水平居中圖片,并且圖片上下沒有空隙。
在接下來的文字中,我們使用了text-align: center;
將文字居中,同時使用了margin-top: 10px;
的樣式將文字與圖片之間的距離設置為 10 像素。
以上代碼只是實現文字居中的一種方法,讀者們可以根據自己的需求進行調整和優化。