jQuery aided Centering of left-aligned block

by audetwebdesign

HTML

<div class="widget-wrap">
    <div class="widget-content">
        <img class="medium_thumb_rounded" src="http://placekitten.com/100/100">
        <img class="medium_thumb_rounded" src="http://placekitten.com/100/100">
        <img class="medium_thumb_rounded" src="http://placekitten.com/100/100">
        <img class="medium_thumb_rounded" src="http://placekitten.com/100/100">
        <img class="medium_thumb_rounded" src="http://placekitten.com/100/100">
        <img class="medium_thumb_rounded" src="http://placekitten.com/100/100">
        <img class="medium_thumb_rounded" src="http://placekitten.com/100/100">
    </div>
</div>

CSS

.widget-wrap {
    outline: 2px dashed blue;
    text-align: center;
    margin: 0 50px;
}
.widget-content {
    outline: 2px dotted blue;
    display: inline-block;
    vertical-align: bottom;
}
.medium_thumb_rounded {
    display: block;
    float: left;
    width: 100px;
}

JavaScript

var $max_w = 600;
var $img_w = 100;

$(window).resize(function () {
    contentResizer();
});

// On load, initially, make sure to set the size.
contentResizer();

function contentResizer() {
    var $parent_w = $(".widget-wrap").width();
    if ($parent_w < $max_w) {
        var $set_w = $parent_w;
    } else {
        var $set_w = $max_w;
    }
    var $trimmed_w = Math.floor($set_w / $img_w) * $img_w;
    $(".widget-content").width($trimmed_w);
}