从前常常想许多原素横向德博瓦桑县翻转，时常用line-height，不过对相片而言，line-height的整体表现并不平庸，因此得用vertical-align:middle。不过用的这时候常常合宪，查了数据资料和课堂教学后，总算晓得vertical-align的用语了！促进作用自然环境：父原素增设line-height。促进作用第一类：子原素中的inline-block和inline原素。
一、当父原素增设了line-height
- 父原素（inline-block\block）要所含line-height（inline原素有没有皆可），子原素中的（inline-block/inline原素）vertical-align就可以起促进作用。
- vertical-align不容承继，要幺原素原则上增设。
相关表述——
在父原素表述了line-height的前提下，vertical-align的促进作用是让（inline/inline-block）子原素依照父原素的百分点翻转。
| 值 | 叙述 |
| 长度 | 通过距离升高（正值）或降低（负值）原素。’0cm’等同于’baseline’ |
| 百分值 – % | 通过距离（相对1line-height1值的百分大小）升高（正值）或降低（负值）原素。’0%’等同于’baseline’ |
| baseline | 默认。原素的基线与父原素的基线翻转。 |
| sub | 降低原素的基线到父原素合适的下标位置。 |
| super | 升高原素的基线到父原素合适的上标位置。 |
| top | 把翻转的子原素的顶端与line box顶端翻转。 |
| text-top | 把原素的顶端与父原素内容区域的顶端翻转。 |
| middle | 原素的中垂点与 父原素的基线加1/2父原素中字母x的高度 翻转。 |
| bottom | 把翻转的子原素的底端与line box底端翻转。 |
| text-bottom | 把原素的底端与父原素内容区域的底端翻转。 |
| inherit | 采用父原素相关属性的相同的指定值。 |
数值详解：1. 首先相关数值，见下面的示例：
.test{vertical-align:-2px;}原素相对基线向下偏移两像素，这个常常用来修复单选框/复选框与12像素文字大小不翻转的问题。2. 再者相关百分数值，这里的vertical-align，是相对此标签承继的line-height值决定的。例如，如下示例代码：
.test{vertical-align:-10%;}假设这里的.test的标签承继的行高是20px，则这里的所代表的实际值是：-10%*20px=-2px。 IE6/IE7浏览器下的vertical-align的百分比值不支持小数line-height
相关促进作用自然环境——只有一个原素属于inline或是inline-block（table-cell也可以认知为inline-block水平）水平，其身上的vertical-align属性才会起促进作用。所谓inline-block水平的原素，即可以与inline水平原素混排，又能增设高宽属性的原素，例如相片，按钮，单复选框，单行/多行文本框等HTML控件，只有这些原素默认情况下会对vertical-align属性起促进作用。对inline原素增设vertical-align是有促进作用的，只是要重新增设line-height的值，否则承继了父原素的line-height只能横向德博瓦桑县
例一：inline原素作为父原素可以不增设line-height，字体会撑起一个适合子原素促进作用的高度。小白点可以各种翻转。
我是一段卡哇伊的文字。
.box{background:black; color:white; padding-left:20px;}
.dot{display:inline-block; width:4px; height:4px; background:white;vertical-align:top;}div父原素要增设line-height，否则对其增设vertical-align合宪
.outerbox{width:300px; line-height: 300px;font-size: 16px; } .outerbox img{width: 30px; height:30px; vertical-align: bottom;} .outerbox span{vertical-align: top;}。这是外层原素的内部文字
对文字增设vertical-align:top 合宪是因为文字承继了父原素的line-height，导致文字德博瓦桑县，要想vertical-align起促进作用，可在该原素上增设line-height小许多覆盖父原素。
二、当父原素没有增设line-height时，inline/inline-block子原素之间翻转。
当父原素没有增设line-height时，只对行内原素的兄弟原素翻转有用，无法子原素德博瓦桑县翻转父原素。增设了vertical-align:middle的子原素的中线与兄弟原素的基线翻转。若兄弟原素都增设该项，则德博瓦桑县翻转。
- 只设文字的vertical-align，则文字的中线翻转相片底线
- 只设相片的vertical-align，则相片的中线与文字的基线翻转
- 两个的vertical-align都为middle，则两个的中线互相翻转
声明： 猿站网有关资源均来自网络搜集与网友提供，任何涉及商业盈利目的的均不得使用，否则产生的一切后果将由您自己承担！ 本平台资源仅供个人学习交流、测试使用 所有内容请在下载后24小时内删除，制止非法恶意传播，不对任何下载或转载者造成的危害负任何法律责任！也请大家支持、购置正版！ 。本站一律禁止以任何方式发布或转载任何违法的相关信息访客发现请向站长举报，会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。本网站的资源部分来源于网络，如有侵权烦请发送邮件至：2697268773@qq.com进行处理。