3张图像居中，左右图像与中间图像对齐

<div class="container">
  <img src="left-image.jpg" alt="Left Image">
  <img src="center-image.jpg" alt="Center Image">
  <img src="right-image.jpg" alt="Right Image">
</div>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container img {
  margin: 0 10px; /* 调整图像之间的间距 */
}
</style>

<div class="container">
  <img src="left-image.jpg" alt="Left Image">
  <img src="center-image.jpg" alt="Center Image">
  <img src="right-image.jpg" alt="Right Image">
</div>

<style>
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
}

.container img {
  margin: 0 10px; /* 调整图像之间的间距 */
}
</style>

<div class="container">
  <img src="left-image.jpg" alt="Left Image" class="left-image">
  <img src="center-image.jpg" alt="Center Image" class="center-image">
  <img src="right-image.jpg" alt="Right Image" class="right-image">
</div>

<style>
.container {
  position: relative;
  text-align: center;
}

.container img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 10px; /* 调整图像之间的间距 */
}

.left-image {
  left: 0;
}

.center-image {
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.right-image {
  right: 0;
}
</style>