baseline－将支持valign特性的对象的内容与基线对齐
sub－垂直对齐文本的下标
super－垂直对齐文本的上标
top－将支持valign特性的对象的内容与对象顶端对齐
text-top－将支持valign特性的对象的文本与对象顶端对齐
middle－将支持valign特性的对象的内容与对象中部对齐
bottom－将支持valign特性的对象的文本与对象底端对齐
text-bottom－将支持valign特性的对象的文本与对象顶端对齐
在此设置为text-bottom即可实现图片与文字位于同一水平线上，好看多了
如下：其他自己改
复制代码
代码如下:
<span style="width:120px"><img src="/images/New_16_blue.gif" style="vertical-align:text-bottom"/>目标任务</span>
实现图片于文字的底端对齐
相信大家对行内元素的认识大多是不换行，不能设置宽高，又或者是来自经典的垂直水平居中内联元素的面试题，把line-height设置成父盒子的高度，但在昨天练习切图的过程中，发现将一行内联元素在垂直方向上对齐很困难，特别是包含img元素，于是决定深入了解一下这行内元素的细节
1.分类：内联元素分为替换元素和非替换元素
MDN上对可替换元素是这么说的
翻译过来就是
这些特殊的行内元素，虽然不换行，但可以设置宽高，四周padding和margin
而普通的行内元素（非替换元素，向span，a等）不能设置宽高，四周margin无效，四周padding有效，
但上下padding比较特殊，不会撑大内容区，但会撑大行高(line-height),下面我们细说
！此处注意：虽然替换元素特殊，但也是行内元素，下面介绍行内元素的一些概念
每个行内元素都有一条基线，规则如下
1.非替换元素中的基线是英文字母x的下端，什么意思，如图，红色的就是这个非替换元素的基线
2.替换元素中的基线就是margin-bottom的外沿
有了基线的知识，我们现来说说一行的行内元素是怎么排列的，只有两步
1.找到本行第一个行内元素，确定它的基线
2.找到下一个行内元素，确定它的基线并与第一个基线对齐，以此类推，直到排完本行内的所有行内元素
等一行的行内元素都排完了，这一行的行框就确定了，为什么叫行框，那肯定是把一行的行内元素都包含进去的框嘛，所以说行框的高度就是本行内最高的行内元素的top line 到最低的行内元素的bottom line。
line-height就是行内元素的内容区+padding，也就是一个行内元素的top line 到bottom line的距离
所以设置line-height为父盒子高度的一半就可以把元素挤到中间。
设置行内元素和本行框基线的对齐方式
大片密密麻麻的文字往往会让人觉得乏味，因此适当地调整行高（line-height）可以减低阅读的困难与枯燥，并且使页面显得美观。行高指的是文本行的基线间的距离，但是文本之间的空白距离不仅仅是行高决定的，同时也受字号的影响。7.3.1 语法
line-height属性的具体定义列表如下：
line-height
语法：
line-height : normal | <实数>| <长度>| <百分比>| inherit
说明：
设置元素中行的高度。
值：
normal：
默认行高，一般为1到1.2；
实数：
实数值，缩放因子；
长度：
合法的长度值，可为负数；
百分比：
百分比取值基于元素的字体尺寸。
初始值：
normal
继承性：
继承
适用于：
所有元素
媒体：
视觉
计算值：
长度和百分比值为绝对值；其他同指定值。
行高指的是文本行的基线间的距离。而基线（Base line），指的是一行字横排时下沿的基础线，基线并不是汉字的下端沿，而是英文字母x的下端沿，同时还有文字的顶线（Top line）、中线（Middle line）和底线（Bottom line），用以确定文字行的位置，如图7-17所示。
图7-17 文字的基线
行高与字体尺寸的差称为行距（leading），如图7-18所示。
图7-18 行高
7.3.2 内容区域、行内框和行框
理论上讲，一行中的每个元素都有一个内容区域，它是由字体尺寸决定的，如图7-19所示。
图7-19 内容区域
行内元素会生成一个行内框（inline box），行内框只是一个概念，它无法显示出来，但是它又确实存在。在没有其他因素影响的时候，行内框等于内容区域，而设定行高则可以增加或者减少行内框的高度，即：将行距的值（行高-字体尺寸）除以2，分别增加到内容区域的上下两边，如图7-20所示。
图7-20 行内框与行高
由于行高可以应用在任何元素上，因此同一行内的若干元素可能有不同的行高和行内框高，例如有如下代码，其显示如图7-21所示。
<p style="line-height:20px"><p>行高20px。<strong style="line-height:50px"><strong>行高50px。</strong><span style="line-height:30px"><span>行高30px。</span></p>
图7-21 行内框与行框
这里又有一个新的概念――行框（line box）。同行内框类似，行框是指本行的一个虚拟的矩形框，其高度等于本行内所有元素中行高最大的值。因此，当有多行内容时，每行都会有自己的行框，如图7-22所示。
图7-22 多行内容的行框
提示：理解行框和行内框的概念对于学习本章[7.4垂直对齐：vertical-align属性]一节的内容非常重要。
注意：行框的高度只同本行内元素的行高有关，而和父元素的高度（height）无关。
7.3 行高：line-height属性[1]
7.3 行高：line-height属性[2]——行高的计算与继承
7.3 行高：line-height属性[3]
