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>
实现图片于文字的底端对齐
align-items:center；对齐方式如下：center，位于容器的中心
flex-start，位于容器的开头
flex-end，位于容器的结尾
baseline，位于容器的基线上。
initial，设置该属性为它的默认值
inherit，从父元素继承该属性
希望对你有所帮助，望采纳！
valign和vertical效果其实是一样的，至于区别该怎么说呢，有点不好解释了，我直接举例好了<table>
<tr>
<td valign="top">文本</td>
</tr>
</table>
<table>
<tr>
<td style="vertical-align:top">文本</td>
</tr>
</table>
vertical-align和valign用于文本的对齐，比如vertical-align:top顶端对齐；vertical-align:bottom底端对齐；vertical-align:middle中部对齐或者说是居中；valign=“top”等也一样；
valign属于一种特性，现在很多新版本的浏览器都不支持这种特性了，所以你最好不要直接使用类似 valign="top"这种直插式的样式，严格按照标准写样式，比如 style="vertical-align:top"或者调用样式表
<td class="top1">文本</td>
.top1{vertical-align:top}
html页面代码量尽量精简，所有样式都调用样式表
