如何在HTML/CSS中对齐列表中的图像( ul > li )？

在HTML/CSS中对齐列表中的图像（ul > li）可以通过多种方式实现，具体取决于你希望的对齐方式和布局需求。以下是一些常见的方法：

方法一：使用Flexbox

Flexbox是一个强大的布局工具，可以轻松地对齐元素。

HTML

<ul class="image-list">
  <li><img src="image1.jpg" alt="Image 1"></li>
  <li><img src="image2.jpg" alt="Image 2"></li>
  <li><img src="image3.jpg" alt="Image 3"></li>
</ul>

CSS

.image-list {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  list-style: none;
  padding: 0;
}

.image-list li {
  margin: 10px;
}

.image-list img {
  width: 100px; /* 设置图像宽度 */
  height: auto; /* 保持图像比例 */
}

方法二：使用Grid布局

CSS Grid也是一个非常强大的布局系统，适用于更复杂的布局需求。

HTML

<ul class="image-grid">
  <li><img src="image1.jpg" alt="Image 1"></li>
  <li><img src="image2.jpg" alt="Image 2"></li>
  <li><img src="image3.jpg" alt="Image 3"></li>
</ul>

CSS

.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列布局 */
  gap: 10px; /* 列之间的间距 */
  list-style: none;
  padding: 0;
}

.image-grid img {
  width: 100%;
  height: auto;
}

方法三：使用传统的浮动和清除浮动

这种方法适用于简单的布局需求。

HTML

<ul class="image-list">
  <li><img src="image1.jpg" alt="Image 1"></li>
  <li><img src="image2.jpg" alt="Image 2"></li>
  <li><img src="image3.jpg" alt="Image 3"></li>
</ul>

CSS

.image-list {
  list-style: none;
  padding: 0;
  overflow: hidden; /* 清除浮动 */
}

.image-list li {
  float: left;
  margin: 10px;
}

.image-list img {
  width: 100px; /* 设置图像宽度 */
  height: auto; /* 保持图像比例 */
}