如何在CSS容器中将多个div居中

小编典典

如何在CSS容器中将多个div居中

css

我正在测试像Windows Metro风格的中心分隔线。如果您检查以下代码：

.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％，在屏幕上居中，这是正确的，但是当我将窗口加宽并且绿色分隔线在移动时，您会看到绿色框在某些点上没有居中。

我已经整天在搜索这个了

如何帮助我呢？

阅读 438

2020-05-16

共1个答案

小编典典

我之前的答案显示了一种坦率地说已经过时的方法（它仍然有效，只有更好的方法可以实现此目的）。因此，我正在对其进行更新，以包括一个更现代的flexbox解决方案。

在这里查看支持；在大多数环境中，使用安全。

这利用了：

display: flex：以flexbox行为显示此元素
justify-content: center 将内部元素沿容器的主轴中心对齐
flex-wrap: wrap 确保内部元素自动包裹在容器中（不要脱离容器）

注意：与HTML和CSS一样，这只是获得所需结果的多种方法之一。在选择适合您的规格的方法之前，请彻底研究。

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

原始答案

您可以将样式text-align:center;应用于容器，并将.blocks 显示为内联块元素：

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

请注意，我已注释掉<div>s 之间的空白。由于元素现在已内联显示，因此将确认您的空格。这是“战斗空间” [的许多方法之一]。

2020-05-16