使用 Flexbox 对齐图像

debugcn 发表于 Dev

罗杰·范

我试图在顶部有 1 张图像，下面有 2 张图像，跨越顶部图像宽度的一半。我遇到的问题是将问题与 2 个图像对齐，其中它们不适合顶部图像下方但与两侧完美隔开。我试图让 2 张图像位于顶部图像下方，在中心完美对齐，下方没有空格。当我缩小窗口时，那是我希望它在全屏上显示的时候，除了没有空格。我还希望它们在屏幕中央完美对齐。

https://jsfiddle.net/voryuja8/

.first {
  display: flex;
}

.first img {
  margin: auto;
  max-width: 800px;
}

.second {
  display: flex;
}

.second img {
  margin: auto;
  flex: 1;
  max-width: 400px;
}

<div class="first">
  <img src="https://sarahannephoto.files.wordpress.com/2015/01/devyn_015.jpg?w=1008" alt="">
</div>

<div class="second">
  <img src="http://preen.inquirer.net/files/2016/05/preen-emily-oberg-complex-e1463660455785.jpg" alt="">
  <img src="http://preen.inquirer.net/files/2016/05/preen-emily-oberg-complex-e1463660455785.jpg" alt="">
</div>

杰拉德·雷克斯

只需margin:auto从图像中删除并justify-content: center在 flex 容器中使用。

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

.first img {
  max-width: 800px;
}

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

.second img {
  flex: 1;
  max-width: 400px;
}

<div class="first">
  <img src="https://sarahannephoto.files.wordpress.com/2015/01/devyn_015.jpg?w=1008" alt="">
</div>

<div class="second">
  <img src="http://preen.inquirer.net/files/2016/05/preen-emily-oberg-complex-e1463660455785.jpg" alt="">
  <img src="http://preen.inquirer.net/files/2016/05/preen-emily-oberg-complex-e1463660455785.jpg" alt="">
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。