本文將介紹如何使用CSS將圖片水平居中并與文字對齊。 首先，我們需要在HTML中插入一張圖片：

<p>這是一段文字，圖片應與之水平居中對齊。</p>
<img src="image.jpg" alt="image">

接下來，我們需要為圖片設置CSS樣式。可以使用以下代碼將圖片設置為塊級元素并設置居中：

img {
display: block;
margin: 0 auto;
}

這會將圖片設置為塊級元素，并使其水平居中。然而，現在它仍然沒有與文字對齊。 為了解決這個問題，我們可以將圖片包裝在一個div元素中，然后為這個div元素設置相同的CSS樣式：

<p>這是一段文字，圖片應與之水平居中對齊。</p>
<div class="image-wrapper">
<img src="image.jpg" alt="image">
</div>
.image-wrapper {
display: block;
margin: 0 auto;
}

現在，圖片將與文字水平居中對齊。 總結： 通過將圖片設置為塊級元素并設置margin屬性，可以實現圖片水平居中。為了與文字對齊，可以將圖片包裝在一個div元素中，并為該元素設置相同的CSS樣式。