React项目中按钮文本设height后无法居中的问题修复求助

问题根源 #

为H1设置固定高度后，默认文本对齐机制失效，导致内容无法垂直居中。以下是两种直接有效的修复方式：

修复方案 #

方案1：Flex布局（推荐） #

通过Flex布局实现精准垂直居中，兼容性好且适配复杂场景：

/* 替换为你的按钮及H1实际选择器 */
.scroll-control-btn h1 {
  height: 50px; /* 你设置的固定高度 */
  display: flex;
  align-items: center; /* 垂直居中核心属性 */
  justify-content: center; /* 可选：实现水平居中 */
  margin: 0; /* 清除H1默认外边距避免偏移 */
}

方案2：行高匹配法 #

如果不需要Flex的额外特性，直接将行高设置为与高度一致：

.scroll-control-btn h1 {
  height: 50px;
  line-height: 50px; /* 行高等于高度实现垂直居中 */
  text-align: center; /* 水平居中 */
  margin: 0;
}

额外提示 #

• 检查按钮或H1是否存在默认padding属性，若有需调整或清除，避免影响居中效果
• 若按钮本身有固定尺寸，建议同时给按钮设置Flex布局，确保内部元素整体对齐

内容的提问来源于stack exchange，提问作者Random dev.