CSS中控制图片和文字在同一行对齐

问题

在写HTML时，经常会出现图片的旁边出现一些文字 这个时候默认情况是图片置顶对齐，文字置底对齐，所以通常图片高，文字低，不能水平居中对齐。甚至有时候是文字与图片不在同一行。

解决方法:

1、通过添加css属性 vertical-align:middle;
2、把文字和图片分别放入不同的div中，就可以设置居中或利用 margin 定位了。
3、把图片作为背景：如果你的图片只是用来作为小图标放在文字的左侧，推荐使用该方法。

示例代码：

1.图片与文字本身就在同一行的情况下，在img中设置css属性：vertical-align:middle

效果

2.图片与文字不在一行的情况下(如文字被p/label标签包裹)，将他们分别放入不同的div中。
处理方式一：在左边的div中设置css属性：vertical-align:middle

处理方式二：将两个div设为浮动并设置为在同一行内以块状显示，然后分别设置其margin使他们对齐
效果：

3.将高度与行高统一 ，图片设置成文字的背景，不循环，定位在左侧上下居中，文字向左padding图片的宽度加几个像素。

效果：