紫枫印象 » 垂直居中 http://www.86ue.com UED web2.0 前端技术 用户体验 SEO 80后 Sun, 14 Mar 2010 14:02:08 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 CSS—使图片、文字、表单元素垂直居中对齐 http://www.86ue.com/archives/22 http://www.86ue.com/archives/22#comments Thu, 15 Oct 2009 16:17:28 +0000 紫枫印象 http://www.86ue.com/?p=22 文字按某种方式对齐， 但是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]]> 一般情况下我们都会会使用<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

]]> http://www.86ue.com/archives/22/feed 0