中心行（自举）

正的div我有包含div可变量的自举行，他们需要相对于居中到它们的父行。在HTML设置这样至今：中心行（自举）

<div class="row proj-container"> 

    <div class="proj col-md-4 col-xs-12"></div> 

</div>

用JavaScript我克隆和追加内.proj容器可变数目.proj的。它工作正常，如果.proj超过3，由于网格布置，它们会正确地包装到其他线条上。我所不能够做到的，是这个组的div的中心其父内。

分配“的.text中心”父不工作
对家长和儿童inline-block的文本对齐不起作用
做父母Flex和理由：空间周围实现居中儿童，但覆盖了网格系统（col-md-4），如果超过三个或更小的设备，他们将不会包装...

任何有关如何设计样式以实现居中包装的divs？

来源

2016-12-27 Uknowho

以下这里是一个多解。看看jsFiddle。

.proj { 
    display: inline-block; 
    height: 10px; 
    border: 1px solid red; 
    margin: 0 -2px; 
    float: none; 
}

HTML：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
<div class="container-fluid"> 
    <div class="row proj-container text-center"> 
    <div class="proj col-md-4 col-xs-12"></div> 
    <div class="proj col-md-4 col-xs-12"></div> 
    <div class="proj col-md-4 col-xs-12"></div> 
    <div class="proj col-md-4 col-xs-12"></div> 
    <div class="proj col-md-4 col-xs-12"></div> 
    </div> 
</div>

来源

2016-12-27 21:00:35 Banzay

你钉了它，谢谢！ I即使没有更多外部div与“容器流体”，并且“proj-container”上的“文本中心”似乎也是多余的。看起来像内嵌块，并且没有漂浮在要被集中的元素上已经产生了差异。你能评论为什么吗？如果包装在最后一行的div会粘到左边（如果小于2），它也是完美的。我不知道这是否可能，但是如果您有解决方案，即使是随意分享。再次感谢你！ – Uknowho

我认为'text-center'会影响非浮动内联块元素。 'float：none'不会将元素推送到任何边界（反向浮动左边或右边），因此非浮动内联元素可以在其父元素内对齐。 – Banzay

你可以试试哪些应围绕网格列

.project-container { 
    text-align: center; /* set all inline elements to be centered */ 
} 

.project-container .proj { 
    display: inline-block; /* set the columns to inline blocks so they are centered */ 
    float: none; 
}

来源

2016-12-27 17:25:51 Axel

谢谢你，但正如我在这个问题指定了该解决方案是行不通的。即使如此显示，我也不知道为什么div不像内联元素那样表现。也许这是因为它们本身包含一堆其他元素，但我不太确定... – Uknowho

这不起作用，因为默认情况下这些列是浮动的（我忘记了考虑）。如果将'float：none;'添加到'.proj'，它应该可以工作。 – Axel

中心行（自举）

回答

相关问题