html - 使用html水平对齐图像

Question

我创建了一个 html 页面和 css 并集成了图像，我想在其中水平对齐图像直到页面水平对齐，然后换行以用图像填充页面。我试过这段代码:

<section class="main clearfix" style="display:inline;">
  <div class="work">
    <a href="inner.html">
      <img src="img/work1.jpg" class="">

    </a>
  </div>

  <div class="work">
    <a href="inner.html">
      <img src="img/work1.jpg" class="" alt="">

    </a>
  </div>

  <div class="work">
    <a href="inner.html">
      <img src="img/work3.jpg" class="" alt="">

    </a>
  </div>

  <div class="work">
    <a href="inner.html">
      <img src="img/work5.jpg" class="media" alt="">

    </a>
  </div>

  <div class="work">
    <a href="inner.html">
      <img src="img/work5.jpg" class="" alt="">

    </a>
  </div>

  <div class="work">
    <a href="inner.html">
      <img src="img/work6.jpg" class="" alt="">

    </a>
  </div>

  <div class="work">
    <a href="inner.html">
      <img src="img/work2.jpg" class="">

    </a>
  </div>

  <div class="work">
    <a href="inner.html">
      <img src="img/work3.jpg" class="">

    </a>
  </div>

  <div class="work">
    <a href="inner.html">
      <img src="img/work1.jpg" class="">

    </a>
  </div>
  <div class="work">
    <a href="inner.html">
      <img src="img/work1.jpg" class="">

    </a>
  </div>
  <div class="work">
    <a href="inner.html">
      <img src="img/work1.jpg" class="">

    </a>
  </div>
  <div class="work">
    <a href="inner.html">
      <img src="img/work1.jpg" class="">

    </a>
  </div>
  <div class="work">
    <a href="inner.html">
      <img src="img/work1.jpg" class="">

    </a>
  </div>
  <div class="work">
    <a href="inner.html">
      <img src="img/work1.jpg" class="">

    </a>
  </div>
  <div class="work">
    <a href="inner.html">
      <img src="img/work1.jpg" class="">

    </a>
  </div>
  <div class="work">
    <a href="inner.html">
      <img src="img/work1.jpg" class="">

    </a>
  </div>
  <div class="work">
    <a href="inner.html">
      <img src="img/work1.jpg" class="">

    </a>
  </div>
  <div class="work">
    <a href="inner.html">
      <img src="img/work1.jpg" class="">

    </a>
  </div>

</section>

文件样式:

.work {
  display: inline;
  float: auto;
}
.work img {
  width: 10%;
  height: 200px;
  margin-left: -2px
}

它向我展示了这样的图片:

我的问题是，这让我在右边留了一个空格，然后又回到了那一行。

Answer 1

只用一个flexbox

.main{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}