如何实现内容元素与标题元素对齐 非同一div下CSS固定宽度对齐方法

可以实现，通过固定宽度配合flex布局就能达到你要的一一对应对齐效果。

你可以给外层的两个父容器（头部容器、内容容器）统一设置为flex横向布局，再给所有子项设置相同的固定宽度即可。如果需要和示例图一样居中对齐，额外给子项加text-align: center属性就行。

示例CSS代码：

/* 头部、内容的父容器统一设置flex横向排列 */
section > div {
  display: flex;
}
/* 所有子项设置相同固定宽度，宽度数值可根据实际需求调整 */
section > div > div {
  width: 120px;
  /* 可选配置：避免长文本撑宽容器，超出后显示省略号 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 和示例图匹配的居中对齐，左对齐改成left即可 */
  text-align: center;
}

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