html - 如何水平对齐图像？

Question

我尝试使用 display: inline-block 和其他东西，比如改变宽度，但我的图像只显示为垂直。

.figure {
  display: inline-block;
}

figure.item {
  color: #676767;
  background-color: #ffffff;
  width: 100%;
  margin: 0;
  text-align: center;
  display: inline-block;
}

.item img {
  width: 100px;
  height: 100px;
  display: inline-block;
}

.caption {
  display: block;
}

<figure class="item">
  <img src="./img/facebook.png" />
  <figcaption class="caption">Facebook</figcaption>
  <img src="./img/insta.png" />
  <figcaption class="caption">Facebook</figcaption>
  <img src="./img/telefone.png" />
  <figcaption class="caption">Facebook</figcaption>
  <img src="./img/email.png" />
  <figcaption class="caption">Facebook</figcaption>
</figure>

现在图像是垂直显示的，下面有文字。我需要图像水平放置，下方有文字。

Answer 1

使用 flexbox

我为每个 img 和文本制作了一个包装 div。

.item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 0;
}

.item img {
  width: 100px;
  height: 100px;
  display: inline-block;
}

.caption {
  display: inline-block;
}

.wrap{
    width:100px;
    text-align: center;
}

<figure class="item">
  <div class="wrap">
    <img src="./img/facebook.png" />
    <figcaption class="caption">Facebook</figcaption>
  </div>
  <div class="wrap">
    <img src="./img/facebook.png" />
    <figcaption class="caption">Facebook</figcaption>
  </div>  
  <div class="wrap">
    <img src="./img/facebook.png" />
    <figcaption class="caption">Facebook</figcaption>
  </div>
   <div class="wrap">
    <img src="./img/facebook.png" />
    <figcaption class="caption">Facebook</figcaption>
  </div>
</figure>