手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >表单元素和文字垂直居中对齐问题解决整理
表单元素和文字垂直居中对齐问题解决整理
摘要:表单页面,为了使表单元素和文字都垂直居中对齐,加个样式input,select{vertical-align:middle},文本框和下拉框...

表单页面,为了使表单元素和文字都垂直居中对齐,加个样式input,select{vertical-align:middle},文本框和下拉框都没问题,但是单选框和复选框就杯具了。

大多表现:单选,复选和文字无间距,单选文字偏上,复选偏上。

关于这些问题网上有人发表了看法,用table搞定一切。这个也是一种方法,哥也不BS。

对于ie6,7下的文字间距问题,网上看到有人说设置width:14px就好了,我试了下发现width:13px更佳。这个问题解决。

对于文字偏上的问题,试了vertical-align下的所有属性都不行。后来发现vertical-align是可以设置数值的,真是白混了这么久。

单选设置了vertical-align:-2px;复选设置vertical-align:-3px;就ok了。拿到ie6,7下测试,发现差了1px,使用了hack搞定。(ie6,7就是神奇)

完整代码如下:

<!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=gb2312" />

<title>表单页面</title>

<style type="text/css">

<>

</style>

</head>

<body>

<ul>

<li>姓名:<input type="text" /></li>

<li>性别:<input type="radio" name="sex" value="1" />男 <input type="radio" name="sex" value="2" />女</li>

<li>年龄:<select name="age">

<option value="">请选择</option>

<option>20以下</option>

<option>20-30</option>

<option>30-40</option>

<option>40以上</option>

</select></li>

<li>兴趣:<input type="checkbox" name="interest" />上网 <input type="checkbox" name="interest" />音乐 <input type="checkbox" name="interest" />游戏 <input type="checkbox" name="interest" />电影 <input type="checkbox" name="interest" />其他</li>

<li></li>

</ul>

</body>

</html>

【表单元素和文字垂直居中对齐问题解决整理】相关文章:

CSS制作水平垂直居中对齐 多种方式各有千秋

CSS图片垂直居中方法整理集合

网页中表单按回车就自动提交的问题的解决方案

列元素所用属性之谜

css控制div中元素居中的示例

chrome表单自动填充导致input文本框背景变成偏黄色问题解决

css中水平垂直居中对齐布局实例总结

用CSS实现文字的阴影效果

css中元素水平垂直居中4种方法介绍

CSS实现同一行的图片和文字垂直居中对齐的方法

精品推荐
分类导航