CSS实现两个并排容器文字垂直居中失效问题求助

问题根源及修正方案 #

先纠正代码里的基础错误

1. HTML语法错误：子容器的id属性写法错误，正确格式是id="xxx"，不是<div = "xxx">
2. CSS选择器不匹配：你用了#Container_Headers（ID选择器），但HTML里父容器是class="Container_Headers"，应该用类选择器.Container_Headers
3. 类名滥用：错误地给子标题容器添加了Container_Headers类，这个类是用来控制父容器布局的，子元素不需要继承这个flex规则

修正后的完整代码

HTML结构

<div class="Container_Headers">
    <div id="Container_FileList_Header"></div>
    <div id="Container_FileDesc_Header"></div>
</div>

CSS样式

/* 父容器：控制两个子容器并排，同时定义垂直居中的基准高度 */
.Container_Headers {
  display: flex;
  align-items: center; /* 让子容器整体在父容器内垂直居中 */
  justify-content: space-between; /* 子容器左右分布，可根据需求换成space-around/flex-start等 */
  height: 48px; /* 给父容器设置明确高度，比如匹配你的标题行高，垂直居中才有参照 */
  width: 100%; /* 确保父容器占满可用宽度，按需调整 */
}

/* 子标题容器：确保内部文本垂直+水平居中 */
#Container_FileList_Header, #Container_FileDesc_Header {
  flex: 1; /* 两个子容器平分父容器宽度，按需调整比例 */
  height: 100%; /* 继承父容器高度，让内部文本垂直居中有基准 */
  display: flex;
  align-items: center; /* 内部文本垂直居中 */
  justify-content: center; /* 内部文本水平居中 */
}

/* 保留原有文本样式 */
.textstyle2 { 
  font-size:12pt; 
  font-family:Arial, Helvetica, sans-serif; 
  color:#000000;  
}
.textstyle5 { 
  text-align:center; 
}

JavaScript代码（移除错误的类名）

document.getElementById("Container_FileList_Header").setAttribute('class',"textstyle2 textstyle5");
document.getElementById("Container_FileDesc_Header").setAttribute('class',"textstyle2 textstyle5");

为什么之前垂直居中失效？

• 父容器没有设置明确高度，align-items: center需要容器有高度才能体现垂直居中效果，否则父容器高度由子内容撑开，垂直方向没有多余空间，看起来就像没居中
• 子容器没有内部的flex布局，仅靠text-align:center只能实现水平居中，无法控制垂直方向
• 选择器错误导致父容器的flex布局根本没生效，子元素错误应用了flex规则，反而打乱了布局逻辑

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