关于Div CSS布局：文本输入框与文本或按钮垂直不对齐

 

在DIV里面如果包含多个DIV子元素，有时候会出现不对齐的情况。原因可能多种，说下我遇到后解决的状况。供参考。

 

思路：

首先把每个DIV元素都加上一个属性 border:1px solid red;

 

这样每个DIV模块都显而易见他们的大小。

 

不对齐的情况有两种：

 

1、模块大小仿佛，但不对齐。

此时可以尝试修改css属性里面 vertical-align，即垂直居中，如 vertical-align:middle;

如果还是有问题，可以查看一下他们的margin和padding属性是否有问题。

 

2、模块大小不同导致不对齐，

这个比较好解决，修改css里面的line-height属性即可。

 

 

除非是BUG，不然一般解决办法都比较简单，重点还是找出突破口。这里我觉得把DIV的边框或者底色加上来查错比较好。可以排除掉很多不必要的猜测。

 

 

 

另：建议长度高度等单位尽量使用em或者百分比(%)。尽可能不要用像素，因为像素(px)浏览器间的兼容性比较差。