时间戳

首页 > 解决方案 > 以动态宽度居中 div，包含卡片

html - 以动态宽度居中 div，包含卡片

问题描述

如何使以下元素居中：

<div class="outer">
  <div class="inner">
    <div class="cards card1">Card 1</div>
    <div class="cards card2">Card 2</div>
    <div class="cards card3">Card 3</div>
    <div class="cards card4">Card 4</div>
  </div>
</div>

卡的数量是动态设置的。外部div的宽度也是如此。根据外部 div 的宽度，我想像这样显示它们：

|                                    |
|    |Card 1 | |Card 2 | |Card 3|    |
|    |       | |       | |      |    |
|                                    |
|    |Card 4 |                       |
|    |       |                       |



|                           |
|    |Card 1 | |Card 2 |    |
|    |       | |       |    |
|                           |
|    |Card 3 | |Card 4 |    |
|    |       | |       |    |



|                                              |
|    |Card 1 | |Card 2 | |Card 3| |Card 4 |    |
|    |       | |       | |      | |       |    |

还有其他类似的问题（Centering a div block without the width），但是它们不处理多行卡片。我尝试过使用以下内容：

.outer {
  text-align: center;
}

然而，这使得卡片 4 位于中间而不是左侧。

或者

.outer {
  width: 100%;
}
.inner {
  display: inline-block;
  transform: translateX(-50%); 
  left: 50%;
}

这有效，但仅当有单行卡片时。当一行中的卡片多于容纳时，它会对齐剩下的所有内容。

标签： htmlcss

解决方案

这是否解决了您正在尝试做的事情？

.outer {
  display: flex;
  justify-content: center;
}

.inner {
  display: flex;
  flex-wrap: wrap;
}

.cards {
  flex-basis: calc(100% / 3);
}
<div class="outer">
  <div class="inner">
    <div class="cards card1">Card 1</div>
    <div class="cards card2">Card 2</div>
    <div class="cards card3">Card 3</div>
    <div class="cards card4">Card 4</div>
  </div>
</div>

推荐阅读