justify-content:center不生效及自定义细边框问题求助

核心问题分析 #

1. 重复ID违规：HTML中使用了重复的id（如parent、heading、textValue），违反ID唯一性规则，会导致样式和选择器异常。
2. 文本居中失效：justify-content: center仅对flex容器生效，直接给非flex容器的元素设置该属性无效；且父容器的justify-content因子元素占满50%宽度，无法体现居中效果。
3. 边框样式不符合需求：ridge是系统自带的立体边框，无法自定义统一颜色，需改用solid边框并指定宽度和颜色。

修正后的代码 #

CSS代码

.parent {
  display: flex;
  width: 100%; /* 确保父容器占满单元格宽度 */
}

.heading {
  width: 50%;
  font-weight: bold;
  border: 1px solid #ccc; /* 极细边框，自定义颜色 */
  text-align: center; /* 文本水平居中 */
  padding: 4px 0; /* 可选：增加内边距优化视觉 */
}

.textValue {
  width: 50%;
  border: 1px solid #ccc; /* 统一边框样式 */
  text-align: center; /* 文本水平居中 */
  padding: 4px 0;
}

/* 可选：实现文本水平+垂直居中 */
.heading, .textValue {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 24px; /* 保证足够高度实现垂直居中 */
}

HTML代码

<td class="innerdetail">
  <div class="parent">
    <div class="heading">555</div>
    <div class="heading">777</div>
  </div>
  <div class="parent">
    <div class="textValue">AB</div>
    <div class="textValue">CD</div>
  </div>
</td>

关键说明 #

• 将所有重复ID改为类名，确保HTML结构合法。
• 用text-align: center直接实现文本水平居中，或通过让子元素成为flex容器实现双向居中。
• 替换ridge边框为border: 1px solid #ccc，可根据需求修改颜色值（如#666、#e0e0e0等）。
• 给.parent添加width: 100%，避免flex容器宽度不足导致子元素布局异常。

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