在網頁設計中，圖片經常被用來豐富頁面效果和內容。而當我們在使用多張圖片時，如何讓它們水平居中成為了一個比較常見的問題。下面我們就來介紹一下如何使用 CSS 來解決這個問題。
首先，我們需要在 HTML 頁面中定義多個圖片標簽，如下所示：
<div class="image-container"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> <img src="image4.jpg" alt="Image 4"> </div>我們將這些圖片放置在一個容器
標簽中，并為這個容器添加了一個類名為“image-container”。接下來，我們需要在 CSS 文件中設置這些圖片的樣式。
.image-container {
text-align: center;
}
.image-container img {
display: inline-block;
}首先，我們設置了容器的文本對齊方式為居中對齊，這樣所有的子元素都會自動水平居中。接著，我們將所有的圖片元素的 display 屬性設為 inline-block，這樣它們就能夠在同一行上并且保持原本的尺寸。
這樣一來，我們就成功地讓這些圖片水平居中了。不過，你會發現當這些圖片的寬度之和超過容器的寬度時，它們仍然會自動換行。這時，我們可以使用 white-space 屬性來控制是否換行。.image-container {
text-align: center;
white-space: nowrap;
}
.image-container img {
display: inline-block;
}在這里，我們將 white-space 屬性設置為 nowrap，這樣所有的子元素都會在一行上，并且超出容器范圍的部分會被裁剪。這樣一來，即使圖片的寬度之和超過了容器的寬度，它們仍然能夠保持水平居中。
總之，使用 CSS 的 text-align 和 white-space 屬性可以讓我們輕松地水平居中多張圖片。當然，如果你還有其他的需求，如垂直居中或者自適應寬度等，你也可以使用其他的屬性來實現。下一篇多看 掌閱 css