本文共 1102 字，大约阅读时间需要 3 分钟。

行高与垂直对齐

7.3 行高

语法

line-height 属性的具体定义列表如下：

• 语法： line-height : normal | <实数> | <长度> | <百分比> | inherit
• 说明：
  • normal：默认行高，一般为1到1.2；
  • <实数>：实数值，缩放因子；
  • <长度>：合法的长度值，可为负数；
  • <百分比>：百分比取值基于元素的字体尺寸；
• 初始值： normal；
• 继承性：继承；
• 适用于：所有元素；
• 媒体：视觉；
• 计算值：长度和百分比值为绝对值；其他同指定值。

内容区域、行内框和行框

• 一行中的每个元素都有一个内容区域，内容区域由字体尺寸决定。
• 行内元素生成行内框，对于行高的改变，行框会根据行高和字体尺寸的差（行距）进行调整。

行高的计算与继承

• 行高可以设定为比字体高度小的值，此时文字会叠加。
• 行高的继承是计算值，子元素根据自己的字体尺寸计算最终行高。

浏览器差别与错误

• 主流浏览器对行高的处理存在差异，但差异不影响实际效果。
• IE 6.0 对包含图片或表单元的行高出现失效问题，需通过 CSS Hack 手段修正。

应用：单行文字垂直居中

• 为实现标题文字垂直居中，只需将行高设置为等于元素高度即可。

7.4 垂直对齐

语法

vertical-align 属性的具体定义列表如下：

• 语法： vertical-align : baseline | sub | super | top | text-top | middle | bottom | text-bottom | <百分比> | <长度> | inherit
• 说明：
  • baseline：基线对齐；
  • sub：下标；
  • super：上标；
  • top：顶端对齐；
  • text-top：与文本顶端对齐；
  • middle：中部对齐；
  • bottom：底端对齐；
  • text-bottom：与文本底端对齐；
• 初始值： baseline；
• 继承性：不继承；
• 适用于：行内元素和表单元格（table-cell）元素；
• 媒体：视觉；
• 计算值：百分比和长度值为绝对长度；其他同指定值。

属性值详解

• 基线对齐：元素的基线与父元素基线对齐，替换元素默认底端对齐。
• 顶端和底端对齐：分别将元素行内框的顶端和底端与行框的顶端或底端对齐。
• 中间对齐：基于中线对齐，中线位置在基线上方 0.5ex 处。
• 上下标：上标和下标通过 super 和 sub 控制，移动幅度由浏览器决定。
• 长度值和百分比：可通过正负长度或百分比控制上下偏移。

注意事项

• 在 IE 中设置百分比或数值对齐可能导致内容混合，需谨慎处理。
• 上下标的移动幅度由浏览器确定，设置时需考虑实际效果。

转载地址：http://tzwfk.baihongyu.com/