如何将一个容器中的多个div集中在CSS中

我正在testing像Windows地铁的风格的中心分隔线。 如果你检查下面的代码：

.container { height: 300px; width: 70%; background: #EEE; margin: 10px auto; position: relative; } .block { background: green; height: 100px; width: 100px; float: left; margin: 10px; } 

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

灰色框为70％，以屏幕为中心是正确的，但是当我使窗口变宽，绿色分隔线移动时，可以看到某些点的绿色框不居中。

我正在寻找这一整天：s

这个怎么能帮到我？

Answer 1

您可以应用样式text-align:center; 到您的容器并显示您的.block作为行内块元素：

 .container { width: 70%; background: #eee; margin: 10px auto; position: relative; text-align:center; } .block { background: green; height: 100px; width: 100px; display:inline-block; margin: 10px; } 

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

Answer 2

如果你改变.block元素的样式，而不是float:left; 你使用display:inline-block; 您可以添加text-align:center到.container

例

Answer 3

所以基本上你的CSS需要这些改变

 .container { text-align:center; } .block { display:inline-block; *display:inline; zoom:1; vertical-align:top; } 

使CSS 与IE7兼容 。

要将底部alignment到左侧，需要一些JavaScript。 由于.querySelector（）向后兼容以下工作无处不在，包括IE8 +; 为了简化和IE7的兼容性强烈推荐jQuery：

 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 */ 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'; } } 

的jsfiddle

Answer 4

现在，您可以使用Flexbox属性作为布局的基础。 这将允许您更多地控制子元素。

 .container { width: 70%; background: #EEE; margin: 10px auto; position: relative; display:flex; flex-wrap:wrap; justify-content:center; } .block { background: green; height: 100px; width: 100px; margin: 10px; } 

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

Answer 5

 .container { background: lightgrey; height: auto; width: 70%; margin: 10px auto; position: relative; display: flex; flex-wrap: wrap; justify-content: space-around; } .block { background: green; height: 100px; width: 100px; margin: 10px; } 

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

Answer 6

 <body> <div class="container"> <div style="width:78%; margin:0 auto;"> <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> </div> </body> 

试试这个div“ <div style="width:78%; margin:0 auto;"> <div style="width:78%; margin:0 auto;"> ”