CSS是網(wǎng)頁設(shè)計中非常重要的一個元素，它可以實現(xiàn)網(wǎng)頁的美化、排版和樣式調(diào)整等功能。在網(wǎng)頁設(shè)計中，圖片通常是必不可少的元素，為了讓網(wǎng)站的效果更好，我們需要使用CSS將圖片和文字進(jìn)行合理的排版。下面介紹一種常用的CSS技巧，即將圖片居中并且附帶文本。

.center-img{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.center-img img{
width: 200px;
height: 200px;
object-fit: cover;
margin-bottom: 20px;
}

以上是將圖片居中的基礎(chǔ)樣式代碼，下面我們來看一下如何在圖片周圍加上文字描述。

.center-img .img-desc{
font-size: 20px;
}

在HTML中，我們只需要在圖片的div標(biāo)簽內(nèi)添加一個p標(biāo)簽即可。

<div class="center-img">
<img src="example.jpg">
<p class="img-desc">這是一張美麗的圖片</p>
</div>

將圖片和文字劇中對齊的時候，我們使用了flex布局，將div的方向設(shè)置為縱向居中，這樣圖片就會在整個div居中，同時文字也會跟隨在圖片下方。我們可以使用font-size來設(shè)置文字大小，這樣就可以更好的搭配圖片。