中心在彼此之下

Question

http://jsfiddle.net/jZLW4/702/

我希望中心div正好在彼此之下，所以在这个例子中左边和中间，中间和右边之间会有一个更大的空白区域。这是可以实现的吗？

像这样（用mspaint制作）：

-     

Answer 1

Bootstrap会让事情变得简单：

<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

在div中居中div的CSS：

.center{
  width: 50%; /*or every other width...*/
  margin: 0 auto;
}

source

如果你不想使用Bootstrap，你可以像这样进行Columns和浮动：

.col-md-4{
  float:left;
  width:300px /*or whatever width you want*/
}

.pull-left{
  float: left;
} 
.pull-right{
  float: right;
}

Answer 2

这似乎可以使用与现代浏览器兼容的display: flex。如果我们使用javascript，那么这里是代码：

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

首先，您需要某种类型的父元素来添加一些调整。然后，您只需更改其中第一级子元素类型的显示类型，并且不使用额外的类名称或浮点数或清除。对于第一级别的孩子，你可以使它更加特异，你可以不将文本对齐中心应用于实际div中的内容。

这是一个实时示例。 这个例子还有一些应用于它的防弹css线。调整心脏含量。同样在这个例子中，取决于浏览器的宽度等......它将响应地居中或全部在一行中心。任何包裹的元素都将保持居中。 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.
*/