CODEWITHSUNDEEP
htmlcss
Jess McKenzie
Jess McKenzie

Reputation: 8385

Image Grid Alignment

I have the following HTML and CSS and I am a bit confused as the best way to "lock" them into a grid - So they look all aligned 5 across by whatever down. I note that the <li> has a set height of 180px

JS Fiddle

Current Result:

enter image description here

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

Upvotes: 0

Views: 69

Answers (1)

Falguni Panchal
Falguni Panchal

Reputation: 8981

try this

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

Upvotes: 1

Related Questions