怎么让图片横向居中在div，而且多个图片就会在并排

要让多个图片在一个div中横向居中并排显示，可以使用以下CSS样式：

.container {
  display: flex; /* 设置容器为弹性布局 */
  justify-content: center; /* 横向居中 */
  align-items: center; /* 纵向居中 */
}

.container img {
  margin: 0 10px; /* 图片之间的间距 */
}

在HTML中，你可以这样写：

<div class="container">
  <img src="image1.jpg" alt="image1">
  <img src="image2.jpg" alt="image2">
  <img src="image3.jpg" alt="image3">
</div>

这样，多个图片就会在一个div中横向居中并排显示了。

相关问题

怎么让一个图片横向居中在div

要让一个图片横向居中在div中，可以使用以下CSS代码：

div {
  text-align: center;
}

img {
  display: block;
  margin: 0 auto;
}

首先，在div元素中使用text-align属性将文本居中。然后，使用display属性将img元素设置为块级元素，并使用margin属性将其左右边距设置为auto，这将使其在div元素中水平居中。请注意，这将仅在该img元素的父元素具有text-align: center属性时起作用。

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）。

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