CSS技巧：如何水平居中排列兩個圖片

在CSS中，我們可以使用多種方法將兩個圖片水平居中排列，下面是一種簡單的方法，使用flexbox布局來實(shí)現(xiàn)。

我們需要創(chuàng)建一個包含兩個圖片的容器，這個容器可以是一個div元素。

HTML代碼：

<div class="image-container">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
</div>

在CSS中，我們可以使用flexbox布局來將這個容器中的兩個圖片水平居中排列。

CSS代碼：

.image-container {
    display: flex;
    justify-content: center;
}

在這個CSS代碼中，display: flex;將容器設(shè)置為flexbox布局，而justify-content: center;則可以將容器中的兩個圖片水平居中排列。

如果你想要讓兩個圖片之間有更大的間距，可以使用margin屬性來設(shè)置圖片之間的間距。

.image-container {
    display: flex;
    justify-content: center;
}
.image-container img {
    margin: 0 10px; /* 在圖片之間添加10像素的間距 */
}

這種方法簡單而有效，可以幫助你輕松地將兩個圖片水平居中排列。