码迷,mamicode.com
首页 > 其他好文 > 详细

vertical-align

时间:2020-07-23 15:54:18      阅读:68      评论:0      收藏:0      [点我收藏+]

标签:length   tps   top   ott   com   字体   developer   amp   percent   

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有正负之分:
当为正数时是基线之上;
当为负数时是基线之下。

vertical-align

标签:length   tps   top   ott   com   字体   developer   amp   percent   

原文地址:https://www.cnblogs.com/frontpen/p/13365399.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!