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.
}

图像宽度有目的地降低到20％。

＆＃13;

.column {
  width: 20.00%;
  padding: 5px;
}


/* Clear floats after image containers */

.row::after {
  content: "";
  clear: both;
  display: table;
}

.row {
  display: flex;
  justify-content: center;
}

＆＃13;

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

＆＃13;

务必检查browser Compatibility with Flexbox。它适用于大多数现代浏览器。

Answer 2

使用Grid的一个选项：

body {
  margin: 0;
  height: 100vh;
  display: grid;
  align-items: center;
  justify-content: center;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* change as you need */
  max-width: 50vw;
}

.image img {
  max-width: 100%;
  height: auto;
  display: block;
}

<div class="wrapper">
  <div class="image">
    <img src="https://unsplash.it/400" alt="BullishTrade">
  </div>
  <div class="image">
    <img src="https://unsplash.it/400" alt="BullishTrade">
  </div>
  <div class="image">
    <img src="https://unsplash.it/400" alt="BullishTrade">
  </div>
</div>

以图像为中心

2 个答案: