HTML和CSS都是我們日常網站開發中必不可少的部分，而其中一個常見的需求是將圖片水平居中顯示。那么該如何實現呢？ 首先，在HTML中我們需要使用標簽來插入圖片。如下所示：

<img src="image.jpg" alt="My Image">

接著，在CSS中我們可以使用text-align屬性來使圖片水平居中。如下所示：

img {
display: block; /*使圖片變為塊級元素*/
margin: 0 auto; /*水平居中*/
}

我們還需要將圖片變為塊級元素，這樣才能夠設置margin屬性。所以我們使用了display: block;來設置圖片為塊級元素。 然后我們設置margin屬性，使用0來表示上下邊距為0，使用auto來表示左右邊距自動計算，從而使圖片水平居中。 最后為了美觀，我們還可以給圖片添加一些樣式，如設置邊框、圓角等。 通過以上設置，就可以輕松地實現圖片水平居中顯示的效果了。 綜上，如果你想讓你的網站中的圖片水平居中顯示，只需要將CSS代碼設置為如下所示即可：

img {
display: block;
margin: 0 auto;
border: 1px solid #ccc;
border-radius: 10px;
}

希望這篇文章對你有所幫助！