怎样让input和文字都垂直居中?
作者:lemon 日期:2010-10-27
用div布局页面,我们经常会遇到这样的问题:需要在一个设置了行高的div里放入登陆框,这就牵涉到要同时放入文字(用户名、密码)和登陆框(input),当我们只是放文字时,文字是可以垂直居中的,但一旦插入input你就会发现:文字和input都靠左上显示了(在FF里现实是垂直居中的)···
其实单单设置margin-top是不行的,我又试了一下,比如下面的页面结构:
程序代码
结构很简单:一个设置了行高的单行div里插入了文字和input。那实际上在预览的时候,你会发现:如果只有文字的时候文字是可以在这个div里垂直居中,但是如果你在文字后面再插入一个input,你会发现,input就贴到div的上边缘去了,在前面我说给input加个margin-top就可以了,实际上这是错误的,那我们到底该怎么解决的···
经过反复调试,下面的css表现是可行的:
程序代码
这里为什么会设置input的上边距为3px呢?我解释一下:
解决这个问题的办法是直接给input写上边距,上边距的值计算方法是:(div行高-input的高度)/2。
这个是没错的,那···这里的div行高是30px-input的高度(20px+上下各1px=22px)=8px,那8px/2=4px 咦?是4px啊,你为什么写3px呢?因为input在默认情况是各有1px的上下边距,那去掉1px就是3px了···
当然,这里我们也可以写:
程序代码
这样写是去掉默认的上下1px边距,然后对input相对定位,不过这样就增加代码行数了,我推荐第一种写法!
只得一提的是,我们在页面结构里,应该对文字加一个span,然后将这个span浮动到左侧,所以页面结构代码应该是这样:
程序代码
其实单单设置margin-top是不行的,我又试了一下,比如下面的页面结构:

<div style=" height:30px; line-height:30px; border:1px solid #ccc; font-size:12px;">请输入用户名<input type="text" name="textfield" />
</div>
</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;
}
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;
}
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>
</div>
评论: 0 | 引用: 0 | 查看次数: -
发表评论