div 图片水平居中横向排列代码

要将多个 div 中的图片水平居中横向排列，可以使用以下代码：

HTML 代码：

<div class="container">
  <div class="image">
    <img src="image1.jpg" alt="图片1">
  </div>
  <div class="image">
    <img src="image2.jpg" alt="图片2">
  </div>
  <div class="image">
    <img src="image3.jpg" alt="图片3">
  </div>
</div>

CSS 代码：

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

.image {
  margin: 10px;
}

.image img {
  display: block;
  max-width: 100%;
  height: auto;
}

首先，使用一个父容器（.container）将所有的 div 包裹起来，并设置为 flex 布局，在水平方向上居中对齐（justify-content: center）。

然后，给每个图片的 div 设置一定的间距（margin: 10px），可以根据需要自行调整。

最后，对于图片本身（.image img），将其设置为 block 元素，使其具有宽度自适应的能力（max-width: 100%），高度根据比例自动调整（height: auto）。

这样，图片就会水平居中横向排列在容器中了。可以根据实际情况调整容器和图片的样式，如设置宽度、高度、边框等。