vertical-align

Posted 2020-12-18 frontpen

vertical-align

MDN链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align

张鑫旭：
我对css-vertical-align的一些理解与认识（一）：https://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/
CSS vertical-align的深入理解(二)之text-top篇：
https://www.zhangxinxu.com/wordpress/2010/06/css-vertical-align%e7%9a%84%e6%b7%b1%e5%85%a5%e7%90%86%e8%a7%a3%ef%bc%88%e4%ba%8c%ef%bc%89%e4%b9%8btext-top%e7%af%87/

vertical-align的值：

vertical-align: baseline;       /* 基线 */
vertical-align: sub;            /* 下标基线 */
vertical-align: super;          /* 上标基线 */
vertical-align: text-top;       /* 字体顶部 */
vertical-align: text-bottom;    /* 字体底部 */
vertical-align: middle;         /* 基线+(x-height/2) */
vertical-align: top;            /* 整行的顶部 */
vertical-align: bottom;         /* 整行的底部 */

/* length：基线+给定的长度 */
vertical-align: 10em;
vertical-align: 4px;

/*percentage： 基线+（line-height的给定百分比） */
vertical-align: 20%;

vertical-align: inherit;    /* 从父元素继承 */
vertical-align: initial;    /* 初始值 */
vertical-align: unset;     /* inherit & initial */

基线（baseline）：

PS：

length和percentage有正负之分：
当为正数时是基线之上；
当为负数时是基线之下。