CSS实现label与input垂直居中且顶部偏移不超指定值不限制自身高度

解决方案 #

方案1：极简方案（兼容Chrome 79+、Firefox 75+、Safari 13.1+） #

直接借助Flex布局的auto margin结合min()函数实现，不需要额外嵌套标签：

div {
  display: flex;
  gap: 16px; /* 可自定义label和input的间距 */
}

label {
  margin-top: min(32px, auto);
  margin-bottom: auto;
}

对应HTML无需修改，和你现有结构完全一致：

<div>
  <label>
    one
    two 
    three
    长文本也不会被截断
  </label>
  <textarea>some text</textarea>
</div>

实现逻辑：

• 当label高度小于等于input高度时，auto的margin值会让label垂直居中
• 当input高度过高时，min()会限制margin-top最大为32px，label不会继续往下偏移，满足顶部偏移最大值要求
• 没有给label设置高度限制，文本长度变化时label高度会自动撑开

方案2：兼容低版本浏览器方案 #

如果需要兼容不支持min()函数的旧浏览器，可以额外嵌套一层label容器实现：

/* 外层行容器 */
.form-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

/* label外层容器 */
.label-wrap {
  height: min(64px, 100%);
  min-height: fit-content;
  display: flex;
  align-items: center;
}

对应HTML结构：

<div class="form-row">
  <div class="label-wrap">
    <label>
      one
      two 
      three
      长文本也不会被截断
    </label>
  </div>
  <textarea>some text</textarea>
</div>

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