HTML/CSS表单label标签无法对齐在文本输入框上方左侧求助

架构老林

2026-9-26

问题原因

你在.account-form类上设置了text-align: center，该属性会被子元素继承，因此label标签的文本默认继承了居中对齐规则，导致你看到label在输入框上方居中显示的效果。

解决方法

不需要修改父容器原有配置，仅调整label的CSS规则即可：给label设置和输入框一致的宽度，同时指定左对齐、水平居中，就能实现label在输入框上方左侧对齐的效果。

修改后的label样式如下：

label {
  color: white;
  display: block;
  /* 修改margin为顶部间距+左右自动居中 */
  margin: 30px auto 0;
  /* 设置和输入框一致的宽度 */
  width: 550px;
  /* 文本左对齐 */
  text-align: left;
  font-family: "Epilogue", sans-serif;
  font-weight: 600;
  font-size: 20px;
}