怎样让input和文字都垂直居中?

  用div布局页面,我们经常会遇到这样的问题:需要在一个设置了行高的div里放入登陆框,这就牵涉到要同时放入文字(用户名、密码)和登陆框(input),当我们只是放文字时,文字是可以垂直居中的,但一旦插入input你就会发现:文字和input都靠左上显示了(在FF里现实是垂直居中的)···

其实单单设置margin-top是不行的,我又试了一下,比如下面的页面结构:

程序代码 程序代码
<div style=" height:30px; line-height:30px; border:1px solid #ccc; font-size:12px;">请输入用户名<input type="text" name="textfield" />
</div>


结构很简单:一个设置了行高的单行div里插入了文字和input。那实际上在预览的时候,你会发现:如果只有文字的时候文字是可以在这个div里垂直居中,但是如果你在文字后面再插入一个input,你会发现,input就贴到div的上边缘去了,在前面我说给input加个margin-top就可以了,实际上这是错误的,那我们到底该怎么解决的···

经过反复调试,下面的css表现是可行的:

程序代码 程序代码
input{
border:1px solid #ccc;
margin:3px 0 0 0;
padding:0;
height:20px;
line-height:20px;
}

这里为什么会设置input的上边距为3px呢?我解释一下:

解决这个问题的办法是直接给input写上边距,上边距的值计算方法是:(div行高-input的高度)/2。
这个是没错的,那···这里的div行高是30px-input的高度(20px+上下各1px=22px)=8px,那8px/2=4px 咦?是4px啊,你为什么写3px呢?因为input在默认情况是各有1px的上下边距,那去掉1px就是3px了···

当然,这里我们也可以写:

程序代码 程序代码
input{
position:relative;
top:4px;
border:1px solid #ccc;
margin:-1px 0;
padding:0;
height:20px;
line-height:20px;
}

这样写是去掉默认的上下1px边距,然后对input相对定位,不过这样就增加代码行数了,我推荐第一种写法!

只得一提的是,我们在页面结构里,应该对文字加一个span,然后将这个span浮动到左侧,所以页面结构代码应该是这样:

程序代码 程序代码
<div style=" height:30px; line-height:30px; border:1px solid #ccc; font-size:12px;"><span style="float:left;">请输入用户名</span><input type="text" name="textfield" />
</div>



[本日志由 lemon 于 2010-10-28 09:22 AM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志:
评论: 0 | 引用: 0 | 查看次数: -
发表评论
昵 称:
密 码: 游客发言不需要密码.
内 容:
验证码: 验证码
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.