Centering divs in a wrapper and making them wrap when the page shrinks

Question

I am trying to create a "gallery" of sorts with sponsor logos for the footer of my robotics team's website. With a wrapper the number of divs per line properly adjusts to suit the size of the display. With display: flex they center properly but all occupy the same line and cover each other. I want the divs to center regardless of their number and page size. There is code below or you can see it on the site here

HTML (two examples):

<h2 class="sponsor_level" style="color:#EDDA26;">Gold Sponsors</h2>
<div class="sponsor_selector" id="wrapper">
<div class="sponsor"><a href="http://www.aacps.org/" target="_blank" ><img src="/wp-content/uploads/2014/08/AACPS-transparent-background.png" alt="AACPS" class="sponsor"></a></div>
</div>

<h2 class="sponsor_level" style="color:#E5E2E7;">Silver Sponsors</h2>
<div class="sponsor_selector" id="wrapper">
<div class="sponsor"><a href="http://www.daly.com/" target="_blank" ><img src="/wp-content/uploads/2014/08/hdr_logo_daly.jpg" alt="Daly Computers" class="sponsor"></a></div>
<div class="sponsor"><a href="https://www.leidos.com/" target="_blank" ><img src="/wp-content/uploads/2014/08/Leidos.png" alt="Leidos" class="sponsor"></a></div>
<div class="sponsor"><a href="http://umcpf.org/board/homepage.php" target="_blank" ><img src="/wp-content/uploads/2014/08/University-of-Maryland.png" alt="University Of Maryland Foundation" class="sponsor"></a></div>
<div class="sponsor"><a href="http://inovexcorp.com/" target="_blank" ><img src="/wp-content/uploads/2014/08/inovex_logo_final_blue_transparent.png" alt="Inovex Information Systems" class="sponsor"></a></div>
<div class="sponsor"><a href="http://www.microsoft.com/en-us/default.aspx" target="_blank" ><img src="/wp-content/uploads/2014/08/microsoft.png" alt="Microsoft" class="sponsor"></a></div>
<div class="sponsor"><a href="http://www.koonstoyotaannapolis.com/index.htm" target="_blank" ><img src="/wp-content/uploads/2014/08/koons.gif" alt="Koons of Annapolis" class="sponsor"></a></div>
<div class="sponsor"><a href="http://www.selbybaymarina.com/" target="_blank" ><img src="/wp-content/uploads/2014/08/selby-bay-marina.jpg" alt="Selby Bay Marina" class="sponsor"></a></div>
<div class="sponsor"><a href="http://www.proair-inc.com/" target="_blank" ><img src="/wp-content/uploads/2014/08/pro-air-inc.png" alt="Pro-Air, Inc" class="sponsor"></a></div>
<div class="sponsor"><a href="http://www.familyveterinaryclinic.com/" target="_blank" ><img src="/wp-content/uploads/2014/08/family-veterinary-clinic.png" alt="Family Veterinary Clinic" class="sponsor"></a></div>
<div class="sponsor"><a href="http://dovernetworks.com/" target="_blank" ><img src="/wp-content/uploads/2014/08/dover_networks_logo.png" alt="Dover Networks LLC" class="sponsor"></a></div>
<div class="sponsor"><a href="http://www.koonsford.com/" target="_blank" ><img src="/wp-content/uploads/2014/08/koonsford-logo.png" alt="Koons Ford of Annapolis" class="sponsor"></a></div>
</div>

CSS:

#wrapper {
    width: auto;
    margin: 0 auto 0 auto;
}

.pleft{text-align: left;}

div.sponsor_parent{background-color: #E5E2E7; 
    width: auto;
    margin: 0 auto 0 auto;}

div.sponsor{
    padding:25px;
    width: 300px;
    height: 60px;
    display: inline-block;
}

img.sponsor{
    max-width:300px; 
    width:auto;
    max-height:60px;
    height:auto;
    margin:0px auto 0px auto;
    display: block;
}

.sponsor_level{
    background-color: #435CC8;
    color: #FFFFFF;
    font-family: serpentine;
    width: 300px;
    margin: 0px auto 0px auto;
    border-radius: 22.5px;
    border:3px solid #8BE1B1;
    text-align: center;
    font-weight: bold;
    font-size: 18pt;
}

.sponsor_selector{
    /*display: -webkit-flex;
    display: flex;*/    
    max-width: 1200px;
    min-width: 400px;
    width:auto;
}


.sponsor_selector:before,
.sponsor_selector:after {
    content: " "; 
    display: table;
}

.sponsor_selector:after {
    clear: both;
}

So you want them all centered and stack vertically? On your page they're all over the place. — Michael Benjamin, Feb 20 '16 at 19:45
yes. I want them to be centered horizontally and to stack vertically as necessary to fit the window size. — Brendan Jackson, Feb 20 '16 at 19:48

Michael Benjamin · Accepted Answer · 2016-02-20T20:03:32.390

1

Try adding and adjusting these rules:

div.sponsor_parent {
    background-color: #E5E2E7;
    /* width: auto; */
    /* margin: 0 auto 0 auto; */
    display: flex;
    flex-direction: column;
    align-items: center;
}

div.sponsor_selector {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

edited Feb 20 '16 at 20:03

answered Feb 20 '16 at 19:50

Michael Benjamin

346,931
104
581
701

I just implemented it, sponsor divs still display in one line. they do not move down or center when the window shrinks. – Brendan Jackson Feb 20 '16 at 19:54
Did you include `flex-wrap: wrap`? It works in Chrome dev tools. – Michael Benjamin Feb 20 '16 at 19:55
I applied `display: flex; flex-direction: column; flex-wrap:wrap;` to sponsor_selector. With all of these active the divs all display above each other and to the left. with `flex-direction: column;` commented out the divs display properly but not centered. – Brendan Jackson Feb 20 '16 at 20:02
When `flex-direction` is `row`, use `justify-content: center` to center flex items. When `flex-direction` is `column`, use `align-items: center` to center items. More details: http://stackoverflow.com/q/32551291/3597276 – Michael Benjamin Feb 20 '16 at 20:05
1

`justify-content: center` worked everything displays how centered and divs move down when the page size is reduced. In conclusion I have `.sponsor_selector{ display: -webkit-flex; display: flex; max-width: 1200px; min-width: 400px; width:auto; flex-wrap: wrap; /*flex-direction: column;*/ justify-content: center; }` Thank you so much. – Brendan Jackson Feb 20 '16 at 20:06

Centering divs in a wrapper and making them wrap when the page shrinks

1 Answers1