怎么理解CSS中vertical-align这个属性

Posted 2023-05-05

在CSS中的vertical-align
属性是设置元素垂直对齐的方式
需要注意的是：
vertical-align属性定义行内元素的基线是相对vertical-align这个元素所在行的基线的垂直对齐。
是会允许指定负长度值和百分比值的。
这样是会导致vertical-align元素降低，并非是升高的。
在单元表格中，vertical-align属性是能设置单元格框中的
单元格内容的对齐方式的
vertical-align属性的浏览器支持情况如下：
目前所有的浏览器都是支持vertical-align的属性的
但是需要注意的是：无论是任何的版本的
Internet
Explorer，包括
IE8在内，都是不支持 "inherit"这个属性值的。
vertical-align属性的实例介绍如下：
垂直对齐一幅图像的实力介绍：
img vertical-align:text-top; 参考技术A vertical-align 属性设置元素的垂直对齐方式。
vertical-align:middle 把元素放置在父元素的中部
vertical-align:bottom 把元素的顶端与行中最低的元素的顶端对齐
vertical-align:top 把元素的顶端与行中最高元素的顶端对齐
vertical-align:inherit 规定应该从父元素继承 vertical-align 属性的值(任何的版本的 internet explorer （包括 ie8）都不支持属性值 "inherit")
还有一些值，如：baseline（默认值），sub，super 等，不太常用。 参考技术B vertical-align
属性设置元素的垂直对齐方式。它的值比较多：baseline
|
sub
|
super
|
top
|
text-top
|
middle
|
bottom
|
text-bottom
|
inherit。
baseline：将支持valign特性的对象的内容与基线对齐
sub：垂直对齐文本的下标
super：垂直对齐文本的上标
top：将支持valign特性的对象的内容与对象顶端对齐
text-top：将支持valign特性的对象的文本与对象顶端对齐
middle：将支持valign特性的对象的内容与对象中部对齐
bottom：将支持valign特性的对象的文本与对象底端对齐
text-bottom：将支持valign特性的对象的文本与对象底端对齐
inherit：规定应该从父元素继承
vertical-align
属性的值(任何版本的ie（包括
ie8）都不支持属性值
"inherit")
注：常用的有top、middle、bottom，其他的不是很常用。一般是用做img的对其。

CSS中的vertical-align不起作用？

如题，为什么我设置了这个属性为middle之后，没有看到容器里的文本之类垂直居中啊？难道vertical align不是垂直对齐方式的意思？
in-line类型的就可以……block就不可以？

vertical-align不支持垂直居中，它又top和bottom是好的，垂直居中可以用light-height 参考技术A vertical align现在的浏览器还都不太支持，大部分只支持align。
等着浏览器升级吧。 参考技术B vertical align可以有align解决 参考技术C 代码贴出来看看