JSFiddle - React, Tailwind, and code Playground
http://stackoverflow.com/questions/17188455/center-inner-dividers-like-metro-design
http://msdn.microsoft.com/en-us/library/ie/ms536343%28v=vs.85%29.aspx#1
HTML
<div class="container">
<div class="block">1. name of the company</div>
<div class="block">2. name of the company</div>
<div class="block">3. name of the company</div>
<div class="block">4. name of the company</div>
<div class="block">5. name of the company</div>
<div class="block">6. name of the company</div>
<div class="block">7. name of the company</div>
<div class="block">8. name of the company</div>
</div>
CSS
.container {
/*height: 300px;*/
width: 70%;
background: #eee;
margin: 10px auto;
position: relative;
text-align:center;
}
.block, .padding {
background: green;
height: 100px;
width: 100px;
/*float: left;*/
margin: 10px;
display:inline-block;
*display:inline;
zoom:1;
vertical-align:top;
}
JavaScript
(function () {
if (!window.addEventListener) {
window.addEventListener = function (type, listener, useCapture) {
attachEvent('on' + type, function () {
listener(event);
});
};
}
window.addEventListener('load', makePaddings, false);
window.addEventListener('resize', makePaddings, false);
function makePaddings() {
var container = document.querySelector('.container');
var blocks = document.querySelectorAll('.block');
var br = [],
max = 0,
i = 0;
var top = blocks[0].getBoundingClientRect().top;
while (blocks[i] && blocks[i].getBoundingClientRect().top == top) {
i++;
}
var show = blocks.length % i ? i - blocks.length % i : 0; /* how many paddings are needed */
//console.log(i, show, blocks.length);
var paddings = document.querySelectorAll('.padding');
if (paddings.length < show) { // add missing paddings
i = show - paddings.length;
while (i--) {
var elem = document.createElement('div');
elem.className = 'padding';
elem.style.visibility = 'hidden';
container.appendChild(elem);
}
paddings = document.querySelectorAll('.padding');
}
for (i = 0; i < paddings.length; i++) {
paddings[i].style.display = (i < show) ? 'inline-block' : 'none';
}
}
})();