• CSS—使图片、文字、表单元素垂直居中对齐

    日期：2009.10.16 | 分类：CSS+HTML | 标签：

    一般情况下我们都会会使用<img>标记的align属性使其周围的文字按某种方式对齐，
    但是align是外观属性，在Web标准盛行的今天，这个属性已经是不推荐使用了。

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

    1. <div id=”buttons”>
    2. <img src=”ZR04.gif” alt=”登录” />
    3. <img src=”ZR05.gif” alt=”注册” />
    4. <a href=”#”>忘记密码</a>
    5. </div>

    复制代码

    但是默认的情况下，文字是底部对齐的。

    效果图：

    实例：
    http://www.86ue.com/download/code/css/vertial/demo1.html
    要使文字垂直居中对齐的方法其实很简单，就是给所有内联元素加垂直对齐样式：

    1. .buttons *{
    2. vertical-align:middle;
    3. }

    复制代码

    效果图：

    实例：
    http://www.86ue.com/download/code/css/vertial/demo2.html