vertical-align表单元素垂直对齐 - 网页制作

　vertical-align表单元素垂直对齐

作者：xidea　时间： 2009-07-27　文档类型：原创　来自：蓝色理想

第 1 页 vertical-align表单元素垂直对齐 [1]
第 2 页 vertical-align表单元素垂直对齐 [2]
第 3 页 vertical-align表单元素垂直对齐 [3]
第 4 页 vertical-align表单元素垂直对齐 [4]

于是，尝试去掉radio的外边距，刷新后显示正常。（其实多选框checkbox也是有外边距的，只是它的外边距四个方向都有，并且相等，所以对于垂直对齐没有影响。）下图是一些常用表单元素的最终显示效果以及最终代码，大家可以用不同浏览器看一下实际的效果（注：由于演示使用的12px的中文实际只有11px高，而 IE下文本框等元素的高度是22px，一个是奇数，一个是偶数，所以这些部分在IE中是无论如何也对不齐的，差1px。如果手动控制文本框高度为奇数，或者将文字设置成为偶数的高度，则显示正常）：

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>测试vertical-align</title> <style> *{margin:0;} label{vertical-align:middle} .inputcheckbox{vertical-align:middle;} body{font-family:tahoma;font-size:12px;} </style> </head> <body> <input class="inputcheckbox" name="test" value="1" type="checkbox"> <label>测试文字x</label> <br/><br/> <input class="inputcheckbox " name="test2" value="2" type="radio"> <label>测试文字x</label> <br/><br/> <input class="inputcheckbox " name="Text1" type="text" /> <label>文字</label> <input class="inputcheckbox " name="Text1" type="text" /> <label>文字</label> <br/><br/> <label>测试文字</label> <input class="inputcheckbox " name="Button1" type="button" value="按钮" /> <br/><br/> <select class="inputcheckbox " name="Select1"> <option>测试文字</option> </select> <label>测试文字</label> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

而且我发现，不但解决了中文的问题，如果提示信息换成其他语言，基本上也能够对齐，至少不会像开始那样偏移太多。下面是截图、代码和一些例子：

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>测试vertical-align</title> <style> label{vertical-align:middle} .inputcheckbox{vertical-align:middle;} body{font-family:tahoma;font-size:12px;} </style> </head> <body> <input class="inputcheckbox " name="test" value="1" type="checkbox"> <label>测试文字x</label> <br/> <input class="inputcheckbox " name="test" value="1" type="checkbox"> <label>這是繁體中文</label> <br/> <input class="inputcheckbox " name="test" value="1" type="checkbox"> <label>次回から自動的にログイン</label> <br/> <input class="inputcheckbox " name="test" value="1" type="checkbox"> <label>English</label> <br/> <input class="inputcheckbox " name="test" value="1" type="checkbox"> <label>Чужой компьютер</label> <br/> <input class="inputcheckbox " name="test" value="1" type="checkbox"> <label>صفحات من ‏السعودية </label> <br/> <input class="inputcheckbox " name="test" value="1" type="checkbox"> <label>회원가입</label> <br/> <input class="inputcheckbox" name="test" value="1" type="checkbox"> <label>הפתוח</label> <br/> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

至此，我的研究过程告于段落。

但是，还是想不通各浏览器为什么最后会显示出这样的效果，其中的原理是什么。牛人们有空可以解释一下吗？

原文： http://www.hplus.org.cn/blog/2009/07/143

经典论坛交流：
http://bbs.blueidea.com/thread-2941023-1-1.html

本文链接：http://www.blueidea.com/tech/web/2009/6910.asp　

出处：蓝色理想
责任编辑：bluehearts

上一页 vertical-align表单元素垂直对齐 [3] 下一页

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。

相关文章

关于"反馈提示"的交互设计


关键字搜索	常规搜索	推荐文档
热门搜索：CSS Fireworks 设计比赛网页制作 web标准用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG

站点最新

站点最新列表

周大福“敬•自然”设计大赛开启

国际体验设计大会7月将在京举行

中国国防科技信息中心标志征集

云计算如何让安全问题可控

云计算是多数企业唯一拥抱互联网的机会

阿里行云

云手机年终巨献，送礼标配299起

阿里巴巴CTO王坚的"云和互联网观"

1499元买真八核云OS双蛋大促

首届COCO桌面手机主题设计大赛

栏目最新

栏目最新列表

浅谈JavaScript编程语言的编码规范

如何在illustrator中绘制台历

Ps简单绘制一个可爱的铅笔图标

数据同步算法研究

用ps作简单的作品展示页面

CSS定位机制之一:普通流

25个最佳最闪亮的Eclipse开发项目

Illustrator中制作针线缝制文字效果

Photoshop制作印刷凹凸字体

VS2010中创建自定义SQL Rule