羞愧
2015-05-26 16:00
采纳率: 80%
浏览 5.3k
已采纳

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

<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
图片说明

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

2条回答 默认 最新

  • danielinbiti 2015-05-26 17:22
    最佳回答

    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;
    }
    
    评论
    解决 无用
    打赏 举报
查看更多回答(1条)

相关推荐 更多相似问题