摘要：允许指定负长度值和百分比值。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。元素基线超过父元素的基线指定高度。取值元素与同行单元格的基线对齐。单元格垂直居中。单元格的内边距的下边缘与行的底端对齐。
vertical-align的理解：
设置元素的垂直对齐方式，是以父元素作为参照的。
多用于图片和文字的并排对齐。
适用于内联元素，内联块元素和表单元素。
display:inline;
display:inline-block;
display:table;
display:table-cell;
浏览器支持所有浏览器都支持 vertical-align 属性。
允许指定负长度值和百分比值。
在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
默认值：baseline
继承性：无
JS语法：
object.style.verticalAlign="bottom"
基线下面红线就是基线。
取值baseline
默认。元素基线与父元素的基线对齐。
一些 可替换元素，比如 `` ， HTML标准没有说明它的基线，这意味着使用这个关键字，各浏览器表现可能不一样。
sub
元素基线与父元素字体的下标基线对齐。
super
元素基线与父元素字体的上标基线对齐。
text-top
元素顶端与父元素字体的顶端对齐。
text-bottom
元素底端与父元素字体的底端对齐。
middle
元素中线与父元素的小写x中线对齐。把此元素放置在父元素的中部。
元素基线超过父元素的基线指定高度。可以取负值。
同
用百分比指定由基线算起的偏移量。
下面两个属性不像上面的属性相对于父元素，而是相对于整行：
top
元素及其后代的顶端与整行的顶端对齐。
bottom
元素及其后代的底端与整行的底端对齐。
如果元素没有基线baseline，则以它的外边距的下边缘为基线。
取值 (table-cell元素)
baseline (and sub, super, text-top, text-bottom,
与同行单元格的基线对齐。
top
单元格的内边距的上边缘与行的顶端对齐。
middle
单元格垂直居中。
bottom
单元格的内边距的下边缘与行的底端对齐。
可以取负值。
例子
vertical-align
参考内容Xbaseline基线对齐
参考内容Xsub下标对齐
参考内容Xsuper上标对齐
参考内容Xtop要对齐的内容
参考内容Xmiddle要对齐的内容
参考内容Xbottom要对齐的内容
参考内容Xtext-top要对齐的内容
参考内容Xtext-bottom要对齐的内容
参考内容Xlength偏移量对齐
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116158.html
摘要：关于的条参考线以及。关于和之间的关系。目标元素的的垂直平分线，与父元素内匿名的对齐。垂直平分线，这个容易理解。要比这些字母的顶端再高一些。 前言 关于 vertical-align，我们很容易想到，这不就是告诉我们元素在纵向上和什么对齐的属性吗？而事实上，正是这种宽泛的说法导致了我们对其的理解存在许多不确定性。事实上，对齐这两个字其实牵涉到4个对象：即哪个对象的哪条线，与哪个对象的哪条...
摘要：内联元素的外边缘与该行高的顶部和底部边缘对齐。如果行高小于字体的高度，不会受影响，但会对齐文本边界。红线表示边界，蓝线表示，黄色为，白色为区域，绿色为区域。的确定规则元素的是它的第一行的。 前言 为什么写这篇总结？最近在文字图标垂直对齐上用到css的vertical-align属性，但是有的时候有效，有的时候无效，常常疑惑不解，反思这是自己对vertical-align的基本认知不够造...
摘要：张鑫旭老师在文章我对的一些理解与认识一中提到属性的表现与否，仅仅与其父标签有关，至于我们通常看到的与后面的文字垂直居中显示那都是假象经过摸索测试，才对这句话有种豁然开朗的感觉。匿名元素我是一段卡哇伊的文字。 张鑫旭老师在文章《我对CSS vertical-align的一些理解与认识（一）》中提到： vertical-align:middle属性的表现与否，仅仅与其父标签有关，至于我们通...
摘要：张鑫旭老师在文章我对的一些理解与认识一中提到属性的表现与否，仅仅与其父标签有关，至于我们通常看到的与后面的文字垂直居中显示那都是假象经过摸索测试，才对这句话有种豁然开朗的感觉。匿名元素我是一段卡哇伊的文字。 张鑫旭老师在文章《我对CSS vertical-align的一些理解与认识（一）》中提到： vertical-align:middle属性的表现与否，仅仅与其父标签有关，至于我们通...
摘要：部分样式代码总结因为用的不多其他对齐方式并没有举例。 起因 内容垂直居中在前端布局中, 是经常遇到的需求。虽然可以用 浮动 float、position:absolute、 来解决, 不过文档流都会受到影响。笔者常用的是 flex, 用起来顺手, 有些地方用起来感觉小题大做, 于是就来探究一下 vertical-align 如何做到居中布局。 初探 要明白 vertical-align...
阅读 1789·2019-08-30 15:53
阅读 3097·2019-08-30 15:44
阅读 2756·2019-08-26 13:31
阅读 1926·2019-08-26 12:10
阅读 754·2019-08-26 11:01
阅读 2067·2019-08-23 15:32
阅读 1522·2019-08-23 13:43
阅读 2501·2019-08-23 11:58
