Center divs under eachother

Question

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):

enter image description here

the easiest way I can think of is the [Grid system of Bootstrap](http://getbootstrap.com/css/#grid). How to center a div in a div is answered [here](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) — Daniel Budick, Dec 05 '14 at 18:50
does it: http://jsfiddle.net/banzay52/rwt2wcnh/ match for your thoughts? — Banzay, Dec 05 '14 at 19:10

score 1 · Answer 1 · edited May 23 '17 at 12:13

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;
}

Thanks for your help. Alright, now I have this: http://jsfiddle.net/bnvtpvba/2/ I'm looking to right-, respective left-align pull-left and pull-right so they are next to center ("vs" text). — Alexander Henne, Dec 05 '14 at 20:57

score 0 · Answer 2 · answered Dec 05 '14 at 18:56

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');
}

score 0 · Answer 3 · 2014-12-05T21:43:37.680

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.
*/

Center divs under eachother

3 Answers3