css页面布局vertical-align:middle;和float:

Question

<div class="row">
                    <div class="cell regist regist_show">
                        <b:message key="validatecode" />
                    </div>
                    <div class="cell regist" style="float:left;">
                    <!-- 上面这个float:left不加的话,在IE8里,下面的输入框和文本框不在一行,加上以后,IE8里的img没有垂直居中,FF,谷歌,360里都是输入框没有垂直居中,请问,有什么好的解决办法? -->
                        <diy:text property="validatecode" autocomplete="off" style="width:60px;"/>
                    </div>
                    <div class="cell regist">
                        <img src="getvcode.do" onclick="refresh(this)" style="margin-left:10px"/>
                    </div>
                </div>
                <div class="row">
                    <div class="cell regist" style="width:960px;text-align:center">
                        <h:submit>
                            <b:message key="operation.regist"/>
                        </h:submit>
                    </div>
                </div>

.regist_show {
text-align:right;
float:left;
width:480px;
}
.regist {
height:40px;
display:inline block;
line-height:40px;
align:center;
vertical-align:middle;
}
.row {
display:table-row inline;
}
.cell {
position:relative;
height:20px;
line-height:20px;
display:table-cell;
overflow:hidden;
}

360,FF效果

IE8效果

修改后IE8

Answer 1

float和display:table系列是不对的，两个冲突，
改成下面样式，去掉了float:left，去掉了块状

 .regist_show {
text-align:right;
width:480px;
}
.regist {
height:40px;
line-height:40px;
align:center;
vertical-align:middle;
}
img{  /*图片居中*/
vertical-align:middle;
}
.row {
display:table-row ;
}
.cell {
height:20px;
line-height:20px;
display:table-cell;
overflow:hidden;
}