图片和文字混排

我们一般会使用<img>标记的align属性使其周围的文字按某种方式对齐，
但是align是外观属性，在Web标准盛行的今天，这个属性已经是不推荐使用了。
http://www.cssrain.cn/demo/lineinie/demo3.html

今天工作时我就遇到了一个问题：
要在同一行放按钮和链接，其中按钮是图片、链接是文字链接，文字链接要在这一行里面居中对齐。
我写出来的HTML结构是这样的：

<div id="buttons"> <img src="ZR04.gif" mce_src="ZR04.gif" alt="登录" /> <img src="ZR05.gif" mce_src="ZR05.gif" alt="注册" /> <a href="#" mce_href="#">忘记密码</a> </div>  

但是默认的情况下，文字是底部对齐的。
http://www.cssrain.cn/demo/lineinie/demo1.html

要使文字垂直居中对齐的方法其实很简单，就是给所有内联元素加垂直对齐样式：#buttons *{ vertical-align:middle; }  

http://www.cssrain.cn/demo/lineinie/demo2.html

 

本文转自：http://hi.baidu.com/heero0w/blog/item/4abced2aaf171a9d033bf6df.html