如何在input-group容器内居中嵌套div元素？

现有嵌套div结构，父div拥有input-group类，需将嵌套div在可用行空间或下一行空闲空间中居中显示，且无论标签数量多少都保持布局效果。

直接调整CSS布局属性即可实现需求，以下是修改后的完整代码：

修改后的CSS代码 #

/* 父容器设置可换行的flex布局，确保每行内容居中 */
.input-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px; /* 替代原分隔符，更灵活控制元素间距 */
}

.small-numeric-container {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.small-numeric-container label {
  margin-right: 0; /* 移除多余间距，input自身已有内边距 */
}

.numeric-small {
  width: 85px;
}

.box {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.rating {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  border: 1px solid #ffffff;
  box-sizing: border-box;
  background: linear-gradient(to right, #ff0000, #20c997, #0f5132);
  flex-wrap: wrap; /* 标签过多时自动换行 */
  justify-content: center;
}

.rating input {
  display: none;
}

.rating label {
  display: flex;
  cursor: pointer;
  width: 45px;
  height: 45px;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
  background: #212529;
  border-right: 1px solid #ffffff;
}

.rating input[type="radio"]:hover~label,
.rating input[type="radio"]:checked~label {
  background: transparent;
  color: #000000;
}

修改后的HTML代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="input-group">
  <div class="small-numeric-container">
    <label>
      <input class="form-control numeric-small" max="15" min="2"
             name="0-scale" placeholder="Scale" type="number" value="10">
    </label>
  </div>
  <div class="box">
    <div class="rating">
      <input id="rating-label-10" name="rating" type="radio">
      <label for="rating-label-10">10</label>
      <input id="rating-label-9" name="rating" type="radio">
      <label for="rating-label-9">9</label>
      <input id="rating-label-8" name="rating" type="radio">
      <label for="rating-label-8">8</label>
      <input id="rating-label-7" name="rating" type="radio">
      <label for="rating-label-7">7</label>
      <input id="rating-label-6" name="rating" type="radio">
      <label for="rating-label-6">6</label>
      <input id="rating-label-5" name="rating" type="radio">
      <label for="rating-label-5">5</label>
      <input id="rating-label-4" name="rating" type="radio">
      <label for="rating-label-4">4</label>
      <input id="rating-label-3" name="rating" type="radio">
      <label for="rating-label-3">3</label>
      <input id="rating-label-2" name="rating" type="radio">
      <label for="rating-label-2">2</label>
      <input id="rating-label-1" name="rating" type="radio">
      <label for="rating-label-1">1</label>
    </div>
  </div>
</div>

关键修改说明 #

• input-group容器：添加flex-wrap: wrap让子元素空间不足时自动换行，justify-content: center确保每行内容居中，用gap替代原分隔符，更灵活控制元素间距
• rating组件：添加flex-wrap: wrap和justify-content: center，当标签数量过多时，评分标签会自动换行并保持居中
• 简化间距设置：移除多余的margin和无用样式，让布局更简洁可控

修改后，无论窗口宽度变化或评分标签数量增减，嵌套div都会在当前行居中，空间不足时自动换行到下一行并保持居中，完全符合需求。

内容的提问来源于stack exchange，提问作者nlblack323