使图片库在中心连续浮动

Question

我一直在尝试制作一个简单的图库，其中图片连续浮动但居中。抱歉我的英语不好。

但我按照 w3s 的例子尝试了我的标志，但它从左到右浮动，我希望它尽可能居中但连续超过 1 张图片。

这是我的 css

div.img {
    margin: 5px;
    border: 1px solid #d60079;
    float: left;
    width: 180px;
  }

div.img:hover {
    border: 2px solid #f0068a;
}

div.img img {
    width: 100%;
    height: auto;
    float:center;
}

div.desc {
    padding: 15px;
    text-align: center;
}

和html

<div class="img">
  <a target="_blank" href="testlogo.png">
    <img src="test4.png" alt="Fjords" width="300" height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="img">
  <a target="_blank" href="testlogo.png">
    <img src="test4.png" alt="Fjords" width="300" height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
</div>
</body>

Answer 1

没有float: center这样的东西。只需将 text-align: center css 添加到父级 div ，所有内容都会居中。

编辑

如果您希望使图像行居中，我建议使用弹性框（请参阅内联样式）

html, body {
  width: 100%;
}

div.img {
    margin: 5px;
    border: 1px solid #d60079;
    width: 180px;
    text-align: center
    position: inline-block;
  }

div.img:hover {
    border: 2px solid #f0068a;
}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
}

  <div style="display: flex; justify-content: center">
    <div class="img">
      <a target="_blank" href="testlogo.png">
        <img src="http://placehold.it/350x150" alt="Fjords" width="300" height="200">
      </a>
      <div class="desc">Add a description of the image here</div>
    </div>

    <div class="img">
      <a target="_blank" href="testlogo.png">
        <img src="http://placehold.it/350x150" alt="Fjords" width="300" height="200">
      </a>
      <div class="desc">Add a description of the image here</div>
    </div>
  </div>

使图片库在中心连续浮动

Make a picture gallery floating in a row in center

html

css

gallery