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

Question

我正在测试像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

您可以将样式display: flex应用于容器并将justify-content: centers 显示为内联块元素:

.container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 70%;
    background: #eee;
    margin: 10px auto;
    position: relative;
    text-align: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>

这是一个更新的小提琴

请注意,我已经注释掉了你们之间的空白区域flex-wrap: wrap.由于元素现在以内联方式显示,因此您的空格将被确认.这是"打空空间" 的众多方法之一.

Answer 2

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

例