用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將是最好的解決方案。