Question

我尝试使用显示设备：内联块和其他类似更改宽度的内容，但我的图像仅显示为垂直。

.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

使用Flex-box

我为每个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>

Answer 2

  figure.item {
    color: #676767;
    background-color: #ffffff;
    text-align: center;
  }
  
  
  .item img {
    width: 100px;
    height: 100px;
  }
  
 

figure {
    width: 25%;
    float: left;
    margin: 0;
    text-align: center;
    padding: 0;
}

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

Answer 3

您的代码段存在几个问题：

第一行.figure并非是类，而是元素选择器（即.figure！== figure）
默认情况下，块元素将显示在彼此下方。

尝试使用flex-box。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.row {
  display: flex;
}

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

如何水平对齐图像？

3 个答案:

使用Flex-box