今天我們來聊一聊CSS中如何實現圖文居中的效果。 通常情況下，我們在一個塊級元素中插入一張圖片和一段文字，此時它們可能會分別居中，看上去比較雜亂。 但是我們可以通過CSS來讓它們完美居中。 一、讓圖片和文字并列 首先，我們可以利用float屬性讓圖片和文字并列。

p {
overflow: auto;
}
img {
float: left;
}
span {
float: left;
}

其中，p元素需要加上overflow:auto屬性，這是為了防止浮動元素溢出，影響后面的內容。同時，圖片和文字都需要加上float:left屬性，讓它們排列在一個水平線上。 二、水平居中 接下來，我們要使圖片和文字的整體居中。

p {
text-align: center;
}
img {
display: inline-block;
margin-top: 10px;
}
span {
display: inline-block;
margin-top: 10px;
}

這里我們為p元素添加了text-align:center屬性，讓圖片和文字在p元素中水平居中。 圖片和文字還需要添加display:inline-block屬性，以便在同一行顯示。同時，為了調整它們在垂直方向上的位置，我們給它們添加了margin-top屬性。 最后，我們來看一看代碼的完整效果：

<p>
<img src="example.jpg" alt="example" />
<span>這是一個例子文字。</span>
</p>

上面的代碼片段中，圖片和文字將會并列，并且居中顯示。