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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

我已经整天在搜索这个了

如何帮助我呢？

回答：

我之前的答案显示了一种坦率地说已经过时的方法（它仍然有效，只有更好的方法可以实现此目的）。因此，我正在对其进行更新，以包括一个更现代的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 之间的空白。由于元素现在已内联显示，因此将确认您的空格。这是“战斗空间” [的许多方法之一]。

以上是 如何在CSS容器中将多个div居中 的全部内容， 来源链接： utcz.com/qa/406216.html

回到顶部