Question

What I have:

A parent div .parent which takes the entire window width=100% as width but a certain minimum width of, let’s say, min-width=800px.

Now I have about 20 .child divs which, let’s say, use a width of width=300px, an undefined height, margin:20px and display:inline-block.

The problem now is that on e.g. smaller screens two divs will be displayed each row but they won’t be centered anymore since their neighbour dropped into the next row.

I tried float:center and margin:5px auto 5px auto; on the children, but float doesn’t seem to work at all and the margin just results in 0 margin

So what I want is:

horizontally center all child divs in the parent while still using e.g. 80% of the screen width by adjusting the margins between them. Part 2 is more of an optional thing

How it looks right now (not working of course)

HTML

<div class="buttons">
    <div class="host 1">&nbsp;</div>
    <div class="host 2">&nbsp;</div>
    <div class="host 3">&nbsp;</div>
    <div class="host 4">&nbsp;</div>
    <div class="host 5">&nbsp;</div>
    ...
</div>

CSS

.buttons {
    position:relative;
    width:100%;
    margin:50px 0 0 0;
    padding:0;
}
.host {
    display:inline-block;
    padding:0;
    margin:20px 20px 5px 20px;
    height:20px;
    width:300px;
    float:center;
}

Answer 1

To center them horizontally, add text-align:center; to the parent:

.buttons {
    position:relative;
    width:100%;
    margin:50px 0 0 0;
    padding:0;
    text-align:center;
}

Demo

---

Equal margins all around

Probably there are hundreds of better ways to do it, but
…that’s mine on a saturday lazy afternoon 🙂

Demo (resize the window)

(same html and css as above)

var hosts = $('.host');
var buttons= $('.buttons');
$(window).on('load resize',function(){
    var w = buttons.width();
    /* how many .host in one row ? */
    var oneRow = Math.floor(w/300);
    /* let's go! */
    if(oneRow>1){
        /* send hosts to the margin calculation function */
        calcMargins(hosts,w,oneRow);
        /* do we have some orphans?! */
        var orphans = hosts.length%oneRow;
        if(orphans!=0){
            /* let's do the same for them */
           var orphansEl = hosts.slice(-orphans);
           calcMargins(orphansEl,w,orphans);
       }
    }else{
        /* there's only one div per row, so
            we reset everything */
        hosts.css({'margin-left':'auto','margin-right':'auto','float':'none'});
    }
});

/* here's the function */
function calcMargins(els,l,r){
    /* total blank space */
    var tSpace = l - (r*300);
    /* we'll add a right margin for each .host and
         a margin-left for the first of each row */
    var nElements = r + 1; 
    /* it's better to leave some pixels behind
        than cause a line wrap, so we'll floor the division */
   var rightMargin = Math.floor(tSpace/nElements);
   /* finally, we set the margins */
   els.each(function(i){
       if(i%r == 0){
           /* left margin for first .host of each row */
           leftMargin = rightMargin;
       }else{
           /* left margin for the rest */
           leftMargin = 0;
       }
       /* here we go */
       $(this).css({'float':'left','margin-left':leftMargin,'margin-right':rightMargin});
    });
}​

Obviously it’s written this way for clarity, but you can reduce it to:

var hosts = $('.host'), buttons= $('.buttons');
$(window).on('load resize',function(){
    var w = buttons.width(), oneRow = Math.floor(w/300);
    if(oneRow>1){
        calcMargins(hosts,w,oneRow);
        var orphans = hosts.length%oneRow;
        if(orphans!=0) calcMargins(hosts.slice(-orphans),w,orphans);
    }else{
        hosts.css({'margin-left':'auto','margin-right':'auto','float':'none'});
    }
});
function calcMargins(els,l,r){
   var rightMargin = Math.floor((l-(r*300))/(r+1));
   els.each(function(i){
       leftMargin = (i%r == 0) ? rightMargin : 0;
       $(this).css({'float':'left','margin-left':leftMargin,'margin-right':rightMargin});
    });
}​

and if you don’t want the "orphans" to be centered, here’s an even smaller version:

var hosts = $('.host'), buttons= $('.buttons');
$(window).on('load resize',function(){
    var l = buttons.width(), r = Math.floor(l/300);
    if(r>1){
       var rightMargin = Math.floor((l-(r*300))/(r+1));
       hosts.each(function(i){
           leftMargin = (i%r == 0) ? rightMargin : 0;
           $(this).css({'float':'left','margin-left':leftMargin,'margin-right':rightMargin});
        });
    }else{
        hosts.css({'margin-left':'auto','margin-right':'auto','float':'none'});
    }
});

…that comes with a demo.

---

If anyone has a shorter solution, i’ld love to learn it 🙂