html - 居中图像的div

Question

如何将包含 3 张图像的集合居中。我希望收藏集中在网页上。并排*。具有间距的并排图像集合。

.column {
  float: left;
  width: 30.00%;
  padding: 5px;
}


/* Clear floats after image containers */

.row::after {
  content: "";
  clear: both;
  display: table;
}

<div class="row">
  <div class="column">
    <img src="https://cdn.pixabay.com/photo/2017/05/09/21/49/gecko-2299365_1280.jpg" alt="BullishTrade" style="width:100%">
  </div>
  <div class="column">
    <img src="https://cdn.pixabay.com/photo/2017/05/09/21/49/gecko-2299365_1280.jpg" alt="BullishTrade" style="width:100%">
  </div>
  <div class="column">
    <img src="https://cdn.pixabay.com/photo/2017/05/09/21/49/gecko-2299365_1280.jpg" alt="BullishTrade" style="width:100%">
  </div>
</div>

Answer 1

使用 Flex 的最简单的解决方案。

.row{
    display:flex;
    justify-content:center; //This will get your images to center.
}

Images width is purposefully reduced to 20%.

.column {
  width: 20.00%;
  padding: 5px;
}


/* Clear floats after image containers */

.row::after {
  content: "";
  clear: both;
  display: table;
}

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

<div class="row">
  <div class="column">
    <img src="https://cdn.pixabay.com/photo/2017/05/09/21/49/gecko-2299365_1280.jpg" alt="BullishTrade" style="width:100%">
  </div>
  <div class="column">
    <img src="https://cdn.pixabay.com/photo/2017/05/09/21/49/gecko-2299365_1280.jpg" alt="BullishTrade" style="width:100%">
  </div>
  <div class="column">
    <img src="https://cdn.pixabay.com/photo/2017/05/09/21/49/gecko-2299365_1280.jpg" alt="BullishTrade" style="width:100%">
  </div>
</div>

确保检查browser Compatibility with Flexbox .它适用于大多数现代浏览器。