verticle-align

最新推荐文章于 2025-06-03 20:14:09 发布

wangning_elsa

最新推荐文章于 2025-06-03 20:14:09 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： verticle 布局

本文链接：https://blog.youkuaiyun.com/wangning_elsa/article/details/55047658

前端专栏收录该内容

37 篇文章

订阅专栏

本文深入探讨CSS中的vertical-align属性，解析其在不同元素及场景下的应用，包括行内元素、表格单元格的垂直对齐技巧，以及如何解决常见的布局难题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

verticle-align

常见场景是居中。尤其是form。
在一些display情况复杂的情境下失效,转而用flex解决，所以该属性使用渐少

内容包括：

css1即有的，也要考虑浏览器支持
适用元素
取值
容易忽略的特性
新手疑惑点
他说：老司机的看法
业务联想
参考资料
详细请戳这里
无法跳转时，请手动：http://gitlab.alibaba-inc.com/wn105798/accumulation/blob/master/css_vertical-align.md

支持

对于这个元素，Can I use是这么说的

CSS vertical-align property
This CSS property is supported in effectively all browsers (since IE6+, Firefox 2+, Chrome 1+ etc)

需要注意的是

任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
由于IE6/7对inline box的解释不完善，同时对vertical-align的认识也可能会对您产生误导的，
行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

适用元素

inline-level and table-cell elements. It also applies to ::first-letter and ::first-line.例如图片，按钮，单复选框，单行/多行文本框等HTML控件，只有这些元素默认情况下会对vertical-align属性起作用

取值 (行内(inline)元素)

多数值是相对于父元素：

baseline

元素基线与父元素的基线对齐。一些可替换元素，比如

取值 (table-cell元素)

baseline (and sub, super, text-top, text-bottom, <length>, and <percentage>)

与同行单元格的基线对齐。

top

单元格的内边距的上边缘与行的顶端对齐。

middle

单元格垂直居中。

bottom

单元格的内边距的下边缘与行的底端对齐。

可以取负值。

其他

默认值： baseline
继承性： no

容易忽略的特性

使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。

新手疑惑点

基线
对比vertical-align:bottom和vertical-align:text-bottom，他们的表现似乎一样，实际上呢，这里的表现一致只是一个巧合而已，此话怎讲？要显示其差异很简单，添加一个line-height值，您就会看到不一样的地方了。

实例：line-height:10px + vertical-align:bottom参见如下的CSS代码：

.box{background:black; color:white; padding-left:20px; line-height:10px;}
.dot{display:inline-block; width:4px; height:4px; background:white; vertical-align:bottom;}

enter image description here
- 而如果vertical-align的属性是text-bottom呢？
- 实例五：line-height:10px + vertical-align:text-bottom参见如下的CSS代码：

    .box{background:black; color:white; padding-left:20px; line-height:10px;}
    .dot{display:inline-block; width:4px; height:4px; background:white; vertical-align:text-bottom;}

结果如下图：
可以看到，vertical-align:text-bottom属性的那个小方点的位置没有随着line-height的改变而改变，还是与文字的底部对齐。如果您细看关于text-bottom以及bottom属性的定义，您可以找到其表现的原因：text-bottom是与父标签的文字底部对齐，在这里也就是后面的“我是一个卡哇伊的文字”这段文字对齐，而bottom是相对于父标签的底部对齐，而如果您熟悉line box模型且对高度的本质有所了解，那么您就会明白为什么line-height会改变标签的bottom的位置了。