DIV内文本字段与日期字段未居中对齐的CSS问题求助

你的核心问题是<h1>和<h2>作为不同层级的标题元素，默认自带不同的外边距、行高，且默认是块级元素占满整行，导致无法在同一行对齐。可以通过以下两种方式修复：

方法一：使用Flexbox布局（推荐） #

给父容器.date-balance设置Flex布局，同时统一子元素的对齐方式，消除默认样式的影响：

.date-balance {
  display: flex;
  justify-content: space-between; /* 左右两端对齐 */
  align-items: center; /* 垂直居中对齐 */
  gap: 1rem; /* 可选：增加左右元素的间距 */
}

/* 清除h1和h2的默认外边距，避免干扰对齐 */
.date-balance #left,
.date-balance #right {
  margin: 0;
  line-height: 1.2; /* 统一行高，确保垂直对齐一致 */
}

对应的Thymeleaf代码保持不变：

<div class="transaction-group" th:each="singleGroup  : ${transactionGroup}">
  <div class="date-balance">
      <h1 id="left" th:text="${singleGroup.date}"></h1>
      <h2 id="right">Balance <span th:text="${singleGroup.monthBalance}"></span></h2>
  </div>
</div>

方法二：调整块级元素为行内块（兼容旧浏览器） #

如果需要兼容不支持Flex的旧浏览器，可以将h1和h2设置为行内块元素，同时调整垂直对齐和默认样式：

.date-balance #left,
.date-balance #right {
  display: inline-block;
  vertical-align: middle; /* 垂直居中对齐 */
  margin: 0;
  line-height: 1.2;
}

.date-balance #right {
  float: right; /* 让Balance靠右 */
}

关键注意点： #

• 一定要清除标题元素的默认margin，浏览器自带的样式会导致错位
• 统一line-height，确保不同字号的文本垂直对齐基线一致
• Flex布局是现代布局的首选，代码更简洁且对齐效果更稳定

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