HTML按钮文字不对齐怎么办？行高line-height调整方案-html教程-PHP中文网

line-height与height相等仍不居中，主因是盒模型干扰（如padding/border未计入内容区）、内联元素基线对齐偏差、字体度量不均或flex/grid等布局上下文使line-height失效；必须满足容器高度明确、纯单行、box-sizing:border-box、无vertical-align干扰、line-height等于内容区高度这五项硬条件。

html按钮文字不对齐怎么办？行高line-height调整方案

line-height设成和height一样，文字还是偏上或偏下？

这不是数值没对齐，而是盒模型或布局上下文在干扰。常见原因有：box-sizing 默认是 content-box，padding 和 border 没被算进内容区；按钮里混了 svg 或 img，它们按 baseline 对齐，把整行“拉高”；父容器用了 display: flex 或 display: grid，此时 line-height 完全不生效；写了 vertical-align 在按钮或子元素上，和 line-height 冲突。

要让 line-height 真正起效，必须同时满足五点：height 明确（不能是 auto）；内容纯单行（加 white-space: nowrap）；box-sizing: border-box；清除所有 padding/border 干扰；line-height 值等于「内容区高度」，即 height - padding-top - padding-bottom - border-top-width - border-bottom-width。

按钮里带图标（SVG/IMG）+ 文字，怎么对齐？

line-height 在这种混合结构里基本不可靠。图标默认按 baseline 对齐，而文字基线位置受字体度量影响，不同字体 ascent/descent 差异大，尤其 icon font 或系统字体更明显。

直接改用 display: flex 是最稳的解法：align-items: center 不依赖字体、不care换行、也不吃 vertical-align 的亏。示例：

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  box-sizing: border-box;
}

如果必须保留 inline 结构（比如老项目），可对图标加 vertical-align: middle，再微调 line-height，但每次换字体或图标都得重测。

表格单元格（`td`/`th`）里文字不居中？

line-height 设在 tr 或 table 上无效——浏览器只认 td 和 th 上的值。常见错误是给 tr 加了 line-height: 40px，结果文字还是贴顶。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

正确做法：line-height 必须写在 td/th 上；配合 vertical-align: middle；加上 border-collapse: collapse 避免边框叠加导致高度飘忽；别同时设 height 和 line-height，容易冲突——小字号时悬空，大字号时溢出。

含图片或多行文本时，height 几乎必然失效，建议用 min-height + padding 控制，或直接用 display: flex 重写单元格内部结构。