CSS是網頁設計中非常重要的一個元素，它可以實現網頁的美化、排版和樣式調整等功能。在網頁設計中，圖片通常是必不可少的元素，為了讓網站的效果更好，我們需要使用CSS將圖片和文字進行合理的排版。下面介紹一種常用的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;
}

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

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

在HTML中，我們只需要在圖片的div標簽內添加一個p標簽即可。

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

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