CSS三張圖片怎么對齊？

在CSS中，我們可以使用多種方法對齊三張圖片，下面是一些常見的對齊方式：

1、水平對齊：

- 使用justify-content: space-between;在Flexbox布局中，可以使三張圖片在水平方向上均勻分布。

- 或者，可以使用margin: 0 10px;給圖片添加左右邊距，實現(xiàn)水平對齊。

2、垂直對齊：

- 使用align-items: center;在Flexbox布局中，可以使三張圖片在垂直方向上居中。

- 或者，可以使用position: relative; top: 50%; transform: translateY(-50%);將圖片相對于其容器垂直居中。

3、綜合對齊：

- 使用justify-content: center; align-items: center;在Flexbox布局中，可以使三張圖片在水平和垂直方向上都居中。

- 或者，使用position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);將圖片相對于其容器在水平和垂直方向上居中。

下面是一個示例代碼，展示如何對齊三張圖片：

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

.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px; /* 示例高度 */
}
.image {
  max-width: 100%; /* 確保圖片寬度不超過容器寬度 */
}

在這個示例中，三張圖片會被容器中的Flexbox布局水平和垂直居中，你可以根據(jù)需要調(diào)整容器的尺寸和圖片的尺寸，這種方法非常靈活，適用于多種布局場景。