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

图片与文字是做网站必不可少的要素，我们在使用图片与文字布局时，如何让图片和文字在同一行对齐显示来制作出一个整齐的网页出来。

对于一些学做网站新手来说，图片和文字在同一行对齐显示却不是一件容易的事情，这主要是由于他们对CSS 的知识并不是太了解。（了解更多CSS知识，可学习DIV CSS教程.）

图片与文字对齐有二种情况：

情况一：图片与一段文字对齐

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

这是通过CSS来控制图片与一个段落顶部对齐，方法见：CSS控制图片与一段文字顶部对齐

情况二：CSS控制图片和单行文字对齐显示

默认情况下，一个区域内有一段文字和图片，文字与图片的对齐方式为居中对齐。如下图:

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

如果要文字与图片的顶部对齐，需要设置图片的垂直对齐属性vertical-align。可以在IMG标签中加入这个属性，并且把它的值设为middle;


<img src="logo.jpg" alt="" style="vertical-align:middle"><a href="">找回密码</a>

这样我们在建网站过程中，就可以使用vertical-align属性来控制图片与单行文字对齐。