圖像網格對齊

我有以下的HTML和CSS，我有點困惑，因爲它是把它們「鎖定」成網格的最佳方式 - 所以它們看起來全部對齊5。我注意到<li>有180px圖像網格對齊

當前結果設定高度：

HTML：

<div class="sponsors"> 
     <p>Pretty amazing huh. These prize packs were only made possible because of the support of our amazing sponsors.</p> 

     <hr> 

     <ul class="sponsors list"> 
      <li><a href="http://butterflycreek.co.nz/"><img src="http://dev.jzm.co.nz/turtle/web/images/sponsors/butterfly-creek.png" alt="Butterfly Creek"></a></li> 
      <li><a href="http://www.tinyturtles.co.nz"><img src="http://dev.jzm.co.nz/turtle/web/images/sponsors/tiny-turtles.png" alt="Tiny Turtles"></a></li> 
      <li><a href="http://www.theparentingplace.com/"><img src="http://dev.jzm.co.nz/turtle/web/images/sponsors/parenting-place.png" alt="The Parenting Place"></a></li> 
      <li><a href="http://www.yates.co.nz/"><img src="http://dev.jzm.co.nz/turtle/web/images/sponsors/yates.png" alt="Yates"></a></li> 
      <li><a href="http://www.myfoodbag.co.nz/"><img src="http://dev.jzm.co.nz/turtle/web/images/sponsors/my-food-bag.png" alt="My Food Bag"></a></li> 
      <li><a href="http://www.avalanchecoffee.co.nz/"><img src="http://dev.jzm.co.nz/turtle/web/images/sponsors/avalanche.png" alt="Avalanche"></a></li> 
      <li><a href="http://www.ohbaby.co.nz/"><img src="http://dev.jzm.co.nz/turtle/web/images/sponsors/ohbaby.png" alt="OhBaby"></a></li> 
      <li><a href="http://getrealfood.co.nz/"><img style="margin-top:128px" src="http://dev.jzm.co.nz/turtle/web/images/sponsors/get-real-food-logo.png" alt="Get Real Food"></a></li> 
      <li><a href="http://littlebopeeps.co.nz/"><img style="margin-top:128px" src="http://dev.jzm.co.nz/turtle/web/images/sponsors/Logo_Little-Bo-Peeps-Logo.png" alt="Little Bo Peeps"></a></li> 
      <li><a href="http://karawoskett.co.nz/"><img style="margin-top:128px" src="http://dev.jzm.co.nz/turtle/web/images/sponsors/Kara-Woskett-Portraits-Logo.png" alt="Kara Woskett Portraits"></a></li> 

     </ul> 


    </div>

CSS：

.sponsors:not(.list) { 
    margin-bottom: -100px; 
    padding: 50px 0; 
    background: #fff; 
} 

.list.sponsors { 
    display: flex; 
    flex-flow: row wrap; 
    justify-content: center; 
    align-items: center; 
    margin: 0 auto; 
    width: 1150px; 
} 
.list.sponsors li { 
    display: inherit; 
    flex: 1 0 200px; 
    justify-content: center; 
    align-items: center; 
    height: 180px; 
    transform: translateY(45%); 
} 
.list.sponsors img { 
    max-width: 100%; 
}

來源

2016-06-09 Jess McKenzie

爲什麼要使用的margin-top的一些圖片 –

試試這個

CSS

.sponsors:not(.list) { 
    margin-bottom: -100px; 
    padding: 50px 0; 
    background: #fff; 
} 

.list.sponsors { 
    display: flex; 
    flex-flow: row wrap; 
    justify-content: center; 
    align-items: center; 
    margin: 0 auto; 
    width: 1150px; 
} 
.list.sponsors li { 
    display: inline-block; 
    /* flex: 1 0 200px;*/ 
    justify-content: center; 
    align-items: center; 
    /* height: 180px;*/ 
    transform: translateY(45%); 
    vertical-align:middle; 
    width:200px; 
    height:200px; 
    background-color:gray; 
    margin:10px; 
} 
.list.sponsors img { 
    max-width: 100%; 
}

demo

來源

2016-06-09 06:03:14 falguni

圖像網格對齊

回答

相關問題