css vertical align对齐规则是什么

这篇文章主要介绍“css vertical align对齐规则是什么”，在日常操作中，相信很多人在css vertical align对齐规则是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”css vertical align对齐规则是什么”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

　　cssvertical-align对齐规则起作用的前提条件，只能应用于内联元素以及display值为table-cell的元素。vertical-align属性只能作用在display计算值为inline、inline-block，inline-table或table-cell的元素上。因此，默认情况下，span、strong、em等内联元素，img、button、input等替换元素，非html规范的自定义标签元素，以及<td>单元格，都是支持vertical-align属性的，其他块级元素则不支持。

　　vertical-align：inline-block和baseline

　　vertical-align属性的默认值baseline在文本之类的内联元素那里就是字符x的下边缘，对于替换元素则是替换元素的下边缘。但是，如果是inline-block元素则规则要复杂了：一个inline-block元素，如果里面就是没有图文内容，或者overflow不是visible，则该元素的基线就是其margin底边缘；否则其基线就是元素里面最后一行内的图文的基线。见demo：inline-block元素的vertical-align.html

　　vertical-align:middle实现垂直居中

　　内联元素：元素的垂直中心点和行框盒子基线往上1/2x-height处对齐。vertical-align:middle定义是元素的中线和字符x中心点对齐

　　table-cell元素：单元格填充盒子相对于外面的表格行居中对齐。table-cell元素设置vertical-align垂直对齐的是子元素，但是其作用的并不是子元素，而是table-cell元素自身。就算table-cell元素的子元素是一个块级元素，也一样可以让其有各种垂直对齐表现。

　　middle将元素盒子的垂直中点与父盒子的baseline加上父盒子的x-height的一半位置对齐这里元素盒子的垂直中点容易确定，父盒子的baseline也好确定，但是x-height要进行计算得到，这个x-height就是字母x的高度。

到此，关于“css vertical align对齐规则是什么”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！