文章目录
一、标签显示模式示例
1、基本结构
2、设置行内元素宽高
3、设置元素背景
4、设置文字水平居中
5、取消链接文字下划线装饰
6、设置鼠标经过样式
二、文字垂直居中
1、行高测量
2、垂直居中设置...: 英文中部分字母的下边界 , 如 a , b , c , d 等到基线就结束了 , 一些长字幕 如 g , j 等需要延伸到 底线 ;
底线 : 文字下边界 ;
行高测量 : 基线 与 基线 之间的距离...相等的 , 因此只要 盒子的高度 与 文本高度 相同 , 就可以做到文字内容垂直居中 ;
设置 文本的行高 等于 盒子标签 的高度 , 就可以实现 文本的 垂直居中 ;
设置行高 30 像素 line-height...:
文本行高 = 盒子高度 : 文本垂直居中 ;
文本行高 > 盒子高度 : 文本偏下 ;
文本行高 < 盒子高度 : 文本偏上 ;
之前的 文本样式 :
文本偏上 , 说明 文本行高 小于...*/
text-align: center;
/* 取消链接下划线 */
text-decoration: none;
/* 文字 垂直居中 行高与文本高度一致 */
line-height
