vertical-align的深入学习
Posted 进击的前端狗
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vertical-align的深入学习相关的知识，希望对你有一定的参考价值。
W3C官方对vertical-align属性的定义有4个方面：
（1）vertical-align属性用于定义“周围的文字、inline元素以及inline-block元素”相对于该元素基线的垂直对齐方式。这里的“该元素”指的是被定义了vertical-align属性的元素；
（2）在表格单元格中，vertical-align属性可以定义单元格td元素中内容的对齐方式。td元素是table-cell元素，也就是说vertical-align属性对table-cell类型元素有效；
（3）vertical-align属性对inline元素、inline-block元素和table-cell元素有效， 对block元素无效；
（4）vertical-align属性允许指定负长度值（如-2px）和百分比值（如50%）；
vertical-align属性中的“基线”跟line-height属性中的基线是一样的道理。在CSS中，vertical-align属性最见的属性值有4个：top（顶部对齐）、middle（中部对齐）、baseline（基线对齐）、bottom（底部对齐）。
table-cell元素
W3C定义：在表格单元格中，vertical-align属性可以定义单元格中内容的对齐方式。也就是说vertical-align属性对table-cell类型元素有效。
这里要注意一下，table-cell元素跟inline、inline-block元素使用vertical-align是有很大区别的：
（1）inline元素和inline-block元素的vertical-align是针对周围的元素来说，vertical定义的是周围元素相对于当前元素的对齐方式；
（2）table-cell元素的vertical-align属性是针对自身而言。vertical-align定义的是内部子元素相对于自身的对齐方式；
<html> <head> <meta charset="UTF-8"> <title>闭包经典题型</title> </head> <style> /*vertical-align属性对inline元素、inline-block元素和table-cell元素有效， 对block元素无效；*/ div{ width: 500px; height: 500px; border:1px solid red; display: table-cell;/*设置了table-cell元素，vertical-align定义的是内部子元素相对于自身的对齐方式*/ vertical-align: middle; } img{ vertical-align:middle;/*img是inline元素，inline元素和inline-block元素的vertical-align是针对周围的元素来说，vertical定义的是周围元素相对于当前元素的对齐方式*/ } </style> <body> <div>我是文字<img src="img/bike-1.jpg" alt="">我是文字</div> </body> </html>
以上是关于vertical-align的深入学习的主要内容，如果未能解决你的问题，请参考以下文章
深入理解line-height与vertical-align
深入理解line-height与vertical-align