在網頁設計中，經常需要在圖片后面加上文字介紹。但是，當圖片大小不一致時，文字就無法完全居中。今天，我們就來了解一下如何居中顯示圖片和文字。 首先，我們要了解CSS中的display屬性。它有兩個重要的值：block和inline-block。block元素會獨占一行，而inline-block元素不會。我們可以利用這個特性來實現圖片和文字的居中。 下面是一段示例代碼：

Example text

我們需要在CSS中添加以下代碼：

.img-wrap {
text-align: center;
}
.img-wrap img {
display: inline-block;
vertical-align: middle;
}
.img-wrap p {
display: inline-block;
vertical-align: middle;
margin: 0;
}

這段代碼的作用是：將包含圖片和文字的div元素設置為居中對齊；將圖片和文字都設置為inline-block元素，并將它們的垂直對齊方式設置為middle；最后，將p元素的margin設置為0，以去掉默認的邊距。 通過這個方法，我們就可以實現圖片和文字的居中對齊了。嘗試一下吧！