如何使用margin：auto來證明畫廊中大小相等的圖像的合理性？

Question

我在div元素“容器”中有width:70%圖片庫。 該圖像需要以自動頁邊距為理由。

這是我的html代碼：（我有4張圖片）

<div class="container">         
    <ul class="grid gallery">
        <li class="animation-element">
            <figure>
                <img src="http://s33.postimg.org/638l2frnz/google_logo.png" alt="GINIS">
                <figcaption>
                    <h3>Name</h3>
                    <span>Description</span>
                </figcaption>
            </figure>
    </li>           
</div>

並且有CSS代碼：

.grid {
    width:100%;
    margin: 0 auto;
    list-style: none;
    text-align:left;}
.grid li {
  border:1px solid blue;
    box-shadow:0px 0px 1px #black;
    display: inline-block;
    width: 250px;
    margin-bottom:20px;
    font-family: "Ubuntu", sans-serif;
    text-align: left;
    position: relative;}

在此CSS代碼中，這個（li）是應辯護的主要元素。

這是我的代碼示例： http : //codepen.io/anon/pen/QEybgL

Answer 1

將此添加到您的CSS代碼：

.grid {
    padding: 0;
    display: flex;
}

.grid > li {
    margin: auto auto 20px auto;
    justify-content: space-around;
}

說明 ：

flex value ：它為其所有直接子級啟用flex上下文。

justify-content ：這定義了沿主軸的對齊方式。 當一行上的所有伸縮項目都不靈活或已達到最大大小時，它有助於分配剩余的可用空間。 當項目溢出線時，它還對項目的對齊方式施加一些控制。

space-around值 ：項目在行中均勻分布，周圍具有相等的空間（如果項目具有相同的大小）。

margin ：在flex容器中設置為auto的margin會占用額外的空間。

---

我建議您閱讀一下flexbox 。

Answer 2

這是一個簡單的修復。 如前所述，您還可以根據需要使用flex，但是如果需要，請確保添加后備功能。 從長遠來看，flex對於畫廊來說可能是最好的。

如果沒有，只需按如下所示更改.grid類：

.grid {
    padding:0;
    list-style: none;
    text-align:center;
}