上一篇
下一篇
怎样让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>
文章来自: 
引用通告: 
Tags: 评论: 0 | 引用: 0 | 查看次数: -
发表评论