调整HTML中按钮行高属性的技巧-html教程-PHP中文网

line-height 对 button 无效，因其默认为 inline-block，文字垂直居中应靠 padding、flex 或 height+line-height（仅限特定 display 值）；优先使用相对单位和弹性布局适配响应式。

调整html中按钮行高属性的技巧

line-height 对按钮无效——它只作用于“形成行框”的文本流元素，而 <button></button> 默认是 display: inline-block，其内部文本的垂直居中靠的是盒模型行为，不是行框计算。

为什么给 button 设 `line-height` 没反应

常见现象：写 button { line-height: 40px; }，但按钮高度没变，文字也没垂直居中。

line-height 在 inline-block 元素上仅影响其**行内内容的行框高度**，但按钮自身高度由 height、padding 和字体撑起，不继承该行高
如果同时设了 height 和 line-height，且 line-height > height，文字会溢出或被裁剪（取决于 overflow）
父容器设了 font-size: 0（比如为清除 inline 间隙），会导致子 button 内部 line-height 计算值为 0 —— 此时必须显式给 button 设 font-size

真正控制按钮文字垂直居中的方法

想让按钮里单行文字上下居中，别碰 line-height，用这三种更稳的方式：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

用 padding：上下 padding 相等，比如 padding: 12px 20px，配合 font-size: 16px 自然居中
用 height + display: flex + align-items: center：button { height: 40px; display: flex; align-items: center; }
用 height + line-height（仅当按钮是 display: block 或 inline 且无 padding 时才勉强有效，但不推荐）