Center divs under eachother - html

Question

http://jsfiddle.net/jZLW4/702/
I want the center divs to be exactly under eachother, so in this example there would be a bigger empty space between the left and center, center and right. Is this accomplishable?
Something like this (made in mspaint):
-

Answer 1

Bootstrap would make things easy:
<div class="col-md-4">
<!--first column-->
<div class="pull-right">Some content
</div>
<div class="pull-right">Some content
</div>
</div>
<div class="col-md-4">
<!--second column-->
<div class="center">Some content
</div>
<div class="center">Some content
</div>
</div>
<div class="col-md-4">
<!--first column-->
<div class="pull-left">Some content
</div>
<div class="pull-left">Some content
</div>
</div>
More about the Grid-System
CSS for centering div in div:
.center{
width: 50%; /*or every other width...*/
margin: 0 auto;
}
source
If you don't want to use Bootstrap, you can do the Columns and the floating like this:
.col-md-4{
float:left;
width:300px /*or whatever width you want*/
}
.pull-left{
float: left;
}
.pull-right{
float: right;
}

Answer 2

This seems to possible using display: flex which has compatibility with modern browsers. If we go with javascript, then here is the code:
Codepen
function setAlign(parentClass, childCommonClass) {
var childDivs = document.getElementsByClassName(childCommonClass);
var childDivsTotalWidth = 0;
var childDivsLength = childDivs.length;
var parentElement = document.getElementsByClassName(parentClass)[0];
var parentElementWidth = parentElement.offsetWidth;
for (var i = 0; i < childDivsLength; i++) {
childDivsTotalWidth += childDivs[i].offsetWidth;
}
var remainingWidth = parentElementWidth - childDivsTotalWidth;
var gap = remainingWidth / (childDivsLength - 1);
var leftWidth = 0;
for (var j = 0; j < childDivsLength; j++) {
if (j > 0) {
leftWidth += gap + childDivs[j - 1].offsetWidth;
}
childDivs[j].style.left = leftWidth + "px";
}
}
window.onload = setAlign('row', 'box');
window.onresize = function () {
setAlign('row', 'box');
}

Answer 3

First you'd need some type of parent element to add some adjustments to. Then you can simply change the display type of the first level type of child element within and use no extra class names or floats or clears. With a bit more specificity on the first level children you can make it not apply text-align center to the content within the actual divs being center.
Here's a LIVE example.
This example also has a couple more css lines of bullet proofing applied to it. Adjust to hearts content. Also in this example depending browsers width etc... it will responsively center or all be on one row centered together too. Any element that wraps will stay centered.
http://jsfiddle.net/jonnyborg/epebr0cu/1/
HTML
<!-- This style should be a Conditional Stylesheet for IE7 and below. calling it up top in the HEAD area.
.my_parent_element {display:block; margin:0 auto;}
.my_parent_element div {display:inline;}
-->
<div class="my_parent_element">
<div>Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
</div>
CSS
/* other than IE7 and down. All other browsers & versions firefox, chrome etc... render. */
.my_parent_element {
text-align: center;
}
.my_parent_element div {
min-width: 10px;// give it a little substance just in case, but depends on your design especially for responsive layout.
display: inline-block;
float: none;
clear: none;
}
/*
Then see my HEAD Conditional Statement for IE7 and below fix. All other versions of IE will render this perfectly without the fix.
*/