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以便它们不会中断

当我调整网站大小时，图像不会保持在一起

1 个答案: