html并排图片和文字不对齐问题

问题：

今天在编写前端时遇到了这样一个问题，在一个li中添加一个img和一个不带标签的文字，但图片和文字对不齐

解决方法：

通过添加vertical-align属性来解决，属性值为text-bottom（vertical-align: text-bottom;），意思是将img的底部与父元素字体的底端对齐。

vertical-align
含义：属性设置一个元素的垂直对齐方式
使用说明：该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式
属性值：
baseline 默认。元素放置在父元素的基线上。
sub：垂直对齐文本的下标
super：垂直对齐文本的上标
top：text-top：把元素的顶端与父元素字体的顶端对齐
middle：把此元素放置在父元素的中部
bottom：使元素及其后代元素的底部与整行的底部对齐
text-bottom：把元素的底部与父元素字体的底端对齐
length：将元素 升高或降低指定的高度，可以是负数
%：使用“line-height”属性的百分比值来排列此元素。允许使用负值
inherit：规定应该从父元素继承vertical-align属性的值