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

文件CSS：

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

Answer 2

除了马丁的解决方案，

如果您担心图像的大小比，flex可能是最好的解决方案，或者，

使用object-fit: coverimg，但它不支持IE。

使用background-size: cover;为背景图像，但是，SEO的可怕的解决方案。

使用table display并在.work DIV申请overflow: hidden;，但是，可怕的反应。

您可能需要检查响应式图像主题，这可以帮助您了解图像如何影响您的网站性能，扩展，尺寸以及您需要了解的开发优质产品的任何其他图像特性。

考虑到图像的显示，在这种情况下，flex将是最好的解决方案。