CSS属性探秘系列(四)：vertical-align
我要评论（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
一、前言
vertical-align对于初学者最常见的使用是在表格中了，尤其是使用dreamweaver的童学，常见的数top,middle,bottom了,其他的应该很少用到，但是vertical-align的属性之多，所以情况也略显复杂，下面先来看看百度及Google常见问题：
1.vertical-align的含义是什么？
2.vertical-align图片和文字对齐兼容性问题？
3.vertical-align属性值各浏览器兼容性？
4.vertical-align如何实现图片的垂直居中？
5.vertical-aling如何实现input[type='checkbox'],input[type='radio']与文本对齐？
6.为什么我设置的vertical-align属性不起作用？
7.line-height对vertical-align属性的影响？
……
二、vertical-align属性介绍
1.适用范围：
vertical-align指定了内联（inline/inline-block）元素或表格单元格（table-cell）元素的垂直对齐方式。
2.可取值：
value 行内元素(inline) 表格单元格中元素(table-cell)
baseline 元素基线与父元素的基线对齐。一些可替换元素，比如 textarea ， HTML标准没有说明它的基线，使用此标签是，各浏览器表现可能有差异 与同行单元格的基线对齐
sub 元素基线与父元素的下标基线对齐
super 元素基线与父元素的上标基线对齐
text-top 元素顶端与父元素字体的顶线对齐
text-bottom 元素底端与父元素字体的底线对齐
length 元素基线超过父元素的基线指定高度。可以取负值
percentage 同length,百分比相对于line-height
middle 元素中线与父元素的小写字母的中线对齐 单元格垂直居中
top 元素及其后代的顶端与整行的顶端对齐(相对于整行)即元素的行内框的顶端与行框的顶端对齐 单元格的内边距的上边缘与行的顶端对齐
bottom 元素及其后代的底端与整行的底端对齐(相对于整行)即元素的行内框的底端与行框的底端对齐 单元格的内边距的下边缘与行的底端对齐
3.根据上面的描述我们先来了解几个基本概念：
1)基线，顶线，中线，底线
:1->顶线
:2->基线
:3->底线
:4->中线
2)行高
相邻文本行基线间的距离
3)行距
上一个文本行基线和下一文本行顶线之间的距离
4)行内框
行内框是浏览器渲染模型中的一个概念，无法显示出来，但是它又确实存在，它的高度就是行高指定的高度。
5)行框(line box)
行框是指本行的一个虚拟的矩形框，也是浏览器渲染模式中的一个概念。行框高度等于本行内所有元素中行内框最大的值（以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度）。
6)内容区
内容区是指底线和顶线包裹的区域(行内元素display：inline可以通过background-color属性显示出来)，实际中不一定看得到，但确实存在。内容区的大小依据font-size的值和字数进行变化。
4.属性各浏览器测试
1)对于行内元素
vertical-align属性值的表现与父元素(div.parent)相关,与兄弟元素的表现无关
待整理…
2)对于单元格元素
对于表格单元格元素默认值如下：
td:左对齐+垂直居中
th:水平居中+垂直居中
垂直居中继承：td/th继承自tr继承自tbody/thead
待整理…
三、常见应用：
待整理…
四、参考资料
https://developer.mozilla.org/zh-CN/docs/CSS/vertical-align
相关文章
深入理解CSS中的vertical-align属性和基线问题
这篇文章主要介绍了深入理解CSS中的vertical-align属性和基线问题,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考2020-04-03css中图片于文本的基线对齐与vertical-align属性设置
默认的情况是图片顶对齐而文字底对齐，通过设置css属性可以使得图片与文字对齐，接下来为大家详细介绍下设置各对象的vertical-align属性，感兴趣的朋友可以参考下哈2013-04-02css 垂直对齐 css中vertical-align属性(垂直对齐)的使用说明
这两天写个页面css的时候用到了vertical-align属性，使用过程中踩到了坑,因此整理了一些，以备不时之需，感兴趣的朋友可以了解下哦2013-01-09- 网页制作Webjx文章简介：CSS实例:vertical-align属性让网页层居中. vertical-align属性使网页层居中 网页源代码如下： <html> <head> &2009-04-02
- vertical-align属性详细分析 最近几天仔细研究了一下vertical-align这个属性，结果让我大吃一惊，这个很“资深”的CSS标准竟然在各个浏览器里面的表现都各不相同2009-02-10
CSS中的vertical-align用于设置行内块或者行内元素行内元素的对齐方式，使用过程中的坑很多，本文就详细的介绍一下vertical-align属性的具体使用方法，感兴趣的可以了解一2023-05-11
最新评论