当图片和文字出现在同一行或一个div里时，浏览器显示出来的图片和文字会出现对不齐，一个在上一个在下，遇到这样的问题，一般有以下几种解决方法
TIPS-1：把图片和包裹文字的span、a等标签都加上vertical-align:middle的样式（vertical-align的具体介绍）
示例：
<html>
<head>
<style type="text/css">
img.top {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}
</style>
</head>
<body>
<p>这是一幅<img class="top" border="0" src="/ico.jpg" />位于段落中的图像。</p>
<p>这是一幅<img class="bottom" border="0" src="/ico.jpg" />位于段落中的图像。</p>
</body>
</html>在实际使用中可能还要做相应的调整：这里还添加了width: auto;`height: 32px;display: inline-block;vertical-align: text-bottom;`
下面是具体效果
这是一幅
位于段落中的图像。
TIPS-2：把图片设置为背景图片，文字用padding或text-indent属性设置进行偏移
TIPS-3：把图片和文字放入不同的div中，然后用margin-left、margin-top属性进行定位，就可以使他们对齐了
TIPS-4：把图片和包裹文字的span都进行浮动，然后用margin-top定位图片，父元素加上height、line-height
