标签 ‘垂直居中’

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

    一般情况下我们都会会使用<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

    2009.10.16 / no responses / 分类: CSS+HTML

最近文章

最近评论

分类目录

紫枫印迹

2010年三月
一 二 三 四 五 六 日
« 二    
1234567
891011121314
15161718192021
22232425262728
293031  

标签云

CSS+HTML css2.0 HTML5 SEO seo优化 SNS User Friendly2009 VIP web 中文手册 互联网 交互 交互设计 产品 产品设计 产品设计师 体验 信息架构 关键词 制作网页 前端开发 原型 命名规则 垂直居中 小技巧 手机网站开发 按钮 支付宝 李开复 流程 用户习惯 用户体验 用户界面 用户研究 用户访谈 瞬间的设计 网站运营 网页设计 背景 行动 视觉设计 设计 设计师 身体语言 页面重构

用户体验设计(UED)

紫枫友情收藏

86ue_rss

设置