調整網站大小時，圖像不會在一起

Question

我制作一個並排有3張圖片的網站。 我實際上想將這3款游戲放在網站中間，但是我還不太了解如何完成它，所以我現在還可以。

但是現在當我調整網站大小時，它們會改變位置。

我試圖解決此問題，但沒有成功。

有誰知道如何解決這一問題？

 html { width: 100%; } body { background: url(achtergrondimage.png); width: 100%; } .home2 { margin: 0 auto; width: 49.7%; text-align: center; background-color: yellow; height: 400px; float: left; } .center { margin-bottom: 0px; margin-top: 200px; margin-left: 225px; width: 40%; padding: 20px; height: 300px; float: left; align-content: center; vertical-align: top; } .homefarcry img { margin: 10px; padding: 0px; float: left; width: 30%; display: inline-block; border: solid 1px; align-content: center; vertical-align: top; border-style: solid; } .homefifa18 img { margin: 10px; padding: 0px; width: 30%; float: left; display: inline-block; border: solid 1px; align-content: center; vertical-align: top; border-style: solid; } .homeoverwatch img { margin: 10px; padding: 0px; width: 30%; float: left; display: inline-block; border: solid 1px; align-content: center; vertical-align: top; border-style: solid; } 

 <div class="center"> <div class="homefarcry"> <div class="farcry5"> <img src="https://images-na.ssl-images-amazon.com/images/I/91j3CuFDMiL._SL1500_.jpg" alt="farcry 5" style="float: left;width: 30%; margin-right: 1%;margin-bottom: 1em" /> </div> </div> <div class="homefifa18"> <div class="fifa18"> <img src="https://resources.budgetgaming.nl/boxarts/118979_fifa18ps4kopen.jpg" alt="fifa18" style="float: left; width: 30%; margin-right: 1%;margin-bottom: 1em" /> </div> </div> <div class="overwatch"> <div class="homeoverwatch"> <div> <img src="http://i.ebayimg.com/00/s/MTUwMFgxMTk2/z/5p8AAOSw65FXuyoV/$_57.JPG?set_id=8800005007" alt="OverWatch" style="float: left; width: 30%;margin-right: 1%;margin-bottom: 1em"> </div> </div> </div> </div> 

Answer 1

html {
  height: 100%;
  width: 100%;
}

body {
  background: url(achtergrondimage.png);
  width: 100%;
}

.img-container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}

.img-container img {
  width: 70px;
  height: 90px;
  margin: 5px;
}

這應該使它們與中心對齊，同時確保它們不會在下一行中斷。

我使用了flexbox和justify-content：在.img-container上居中以將它們與居中對齊並進行flex-wrap：nowrap以便它們不會破裂