"匿名inline元素"的实例.

默认状态下的(泛)inline水平元素:

    图片/按钮/文字/单元格

注意这里的"未知元素"

inline水平 和 table-cell元素

vertical-align 只能应用于"内联"元素 和 "表单元"元素.

table-cell里面的元素会居中

只有inline水平元素和‘table-cell’（单元格）元素vertical-align才有效

<span>文字<br/>文字<br/>文字<br/>文字<br/></span>

多行文本的实现

多行文字与图片的对齐，文字设置display:inline-block, width:xxx, vertical-align:middle, 图片设置vertical-align: middle

使用display:table-cell垂直居中时，父元素设置dispaly:table-cell, vertical-algin:middle, 子元素不用设置就可以自动居中

vertical-algin 子元素为inline，vertical-align:middle，但是父元素的行高要等于父元素的高度，才能体现出子元素vertical-align的作用

vertical-align: 应用于inline水平及table-cell

vertical-align起作用的前提：

引用于inline水平和table-cell元素

1、inline水平：

inline：<img>、<span>、<strong>、<em>、未知元素……

inline-block：<input>、<button>

2、table-cell元素

<td>

vertical-align只应用于inline水平以及table-cell元素

vertical-align起作用的前提是：

元素的display是inline或者inline-block，或者是table-cell

vertical-align应用于inline水平以及table-cell元素。默认状态下： 图片、按钮、文字和单元格

给元素设置浮动，会改变元素的display属性为block，从而是vertical-align失效

文字和图片对齐的实现方式，把文字和图片都要设置为vertical-align： middle

绝对定位元素也不支持vertical-align

给元素设置浮动后，元素就变成块级元素，vertical-align就不起作用了

vertical align 只对内联元素和table-cell 起作用

文字block化，图片和文字都vertical-align: middel