css中vertical-align生效

参考：https://www.jianshu.com/p/24c00a01da36

作用环境：父元素设置line-height。
作用对象：子元素中的inline-block和inline元素。
一、当父元素设置了line-height
父元素（inline-block\block）必须含有line-height（inline元素有无皆可），子元素中的（inline-block/inline元素）vertical-align才能起作用。

vertical-align不可继承，必须对子元素单独设置。

数值详解：

首先关于数值，见下面的示例：
　.test{vertical-align:-2px;}
　元素相对于基线向下偏移两像素，这个常常用来修复单选框/复选框与12像素文字大小不对齐的问题。

再者关于百分数值，这里的vertical-align，是相对于此标签继承的line-height值决定的。例如，如下示例代码：
　.test{vertical-align:-10%;}
　假设这里的.test的标签继承的行高是20px，则这里的所代表的实际值是：-10%*20px=-2px。 IE6/IE7浏览器下的vertical-align的百分比值不支持小数line-height。

inline元素作为父元素可以不设置line-height，字体会撑起一个适合子元素作用的高度。
div父元素必须设置line-height，否则对其设置vertical-align无效

css中vertical-align生效相关推荐

html5外链式引入不了字体,css中导入外部字体不生效的原因是什么？
css中可以使用@font-face引入外部字体,使用@font-face规则,网页设计师再也不必使用的"web-safe"的字体之一.有时使用@font-face规则引入外部字体 ...
css中伪类选择器详解(a:visited不生效的原因)
css伪类是一种css定义的方法,主要用于对链接显示效果的定义, 主要包括: a:link :链接平常的状态. a:visited:链接被访问之后的状态. a:hover:鼠标停留在链接上的状态. a ...
css中导入外部字体不生效的原因是什么？
css中可以使用@font-face引入外部字体,使用@font-face规则,网页设计师再也不必使用的"web-safe"的字体之一.有时使用@font-face规则引入外部字体 ...
html中伪类的兼容性,css,ie8兼容性_CSS 伪类在IE8中样式无法生效，css,ie8兼容性,伪类 - phpStudy...
CSS 伪类在IE8中样式无法生效写了一个纯CSS的竖版流程样式,效果如下起始 1 2 结束使用:before生成左侧圆,首尾两头的li用:after生成竖条,其余都用border-left填补 ...
html text align属性,CSS中的text-align属性怎么用
CSS的text-align属性可用于设置文本的位置,接下来的这篇文章将给大家介绍关于CSS中的text-align属性的用法,下面我们来看具体的内容. 我们先来看一段简单的代码在此处显示文字效果 ...
[转]深入理解CSS中的层叠上下文和层叠顺序
http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是 ...
HTML中的align和valign这两个属性
转自:https://www.douban.com/note/325833958/ align和valign属性均是规定表格相对于周围元素的对齐方式,区别就在于: 1.align属性趋向于左右对齐,其 ...
CSS中的EM属性-弹性布局
使用CSS也好久了,但一直都是在使用"px"来设置Web元素的相关属性,未敢使用"em".主要原因是,对其并不什么了解,只知道一点概念性的东西,前段时间在项目 ...
css中的em 简单教程 -- 转
先附上原作的地址: https://www.w3cplus.com/css/px-to-em 习惯性的复制一遍~~~~ -------------------------------我是分界线---- ...
[css] CSS中的calc()有什么作用？
[css] CSS中的calc()有什么作用? 用来计算长宽的属性,非常好用,百分比,px,vh/vm都可参与计算, 不过正如上面的大兄弟说的,运算符的左右要有空格,要不然不生效个人简介我是歌谣, ...

css中vertical-align生效

css中vertical-align生效相关推荐

最新文章

热门文章