Centralizando DIV dinamicamente via JS

by Ronny Amarante

HTML

<div class="container">
    <div class="lists">a</div>
    <div class="lists">aa</div>
    <div class="lists">a</div>    
</div>

SCSS

.container{
    height:60px; 
    background-color: #ccc;
    
    .lists{
        float: left;
        height: 100px;
        width: 80px;
    }
}

JavaScript

var str  = 0;
$('.container div').each(function(){
 str += $(this).width();
    
});
alert(str);
$('.container').css({
      "width": str,
      "margin": "0 auto"
});