石周明

==========这篇文章被search到的机会比较多，今天晚上登陆空间在访问记录里看到从百度又过来几个点击，然后仔细看了一下我写的东西，发现这篇东西还是有点问题的，我想，不能误导大家!然后又思考了一下，所以想重新写一下==========

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

　　解决这个问题的办法是：给input写只针对ie的hack，margin-top，这个margin-top的值计算方法是：(div行高-input的高度)/2。

　　其实，还应该有其他情况，行面的情况是文字和input同时存在div里，还有比如只有input的情况，还好，div里只有input的情况比较少一点，但解决的办法都一样，写hack。

————–上面是以前写的东西————–

其实单单设置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>

反正解决这个问题，应该还有其他的办法，这里只是我的一些拙见，不妥之处，还请大家指教···