div+table垂直居中问题

jason87629 2011-07-01 12:32:49



<div id="main" style="text-align:center;background:url(Images/login.jpg) no-repeat center;height:100%; width:100%">

<div id="div1" style="width: 350px;">

    <table border="0" style="height:100%;width:100%">

    <tr>

    <td align="center" valign="middle">

    <ul>

    <li>登录账号 <input id="Text1"  name="login_id" type="text" onkeydown="if(event.keyCode==13)event.keyCode=9;" style="width:160px;" /></li>

    <li></li>

    <li>登录密码 <input id="Password1" name="login_pw" type="password" onkeydown="if(event.keyCode==13){document.getElementById('Button1').click();return false;}" style="width:160px" /></li>

    <li></li>

    <li style="text-align:left;margin:10px 0 0 20%;">

    <input id="Button1" type="button" runat="server" value="登 录" onserverclick="Button1_Click" onclick="if(button())"/>

    <input id="Button2" type="button" value="重 置" style="margin:0 0 0 10%;" /></li>

    </ul>

    </td>

    </tr>

    </table>

</div>

</div>

以上是我登陆框的相关代码，为什么我在ie8下能垂直居中的，但在ie6却不能？？

我在vs2008的设计模式下看到的图也是垂直居中的!!但用浏览器浏览ie6的会在最上面，ie8的是垂直居中的。

ie8的极速模式下会在左上角，连水平居中也不行。

谁帮帮忙，主要解决ie6下垂直居中问题，极速模式下的要是也有办法解决也希望大家帮帮忙！！

...全文

756 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

技术改变生活 2012-07-03

打赏
举报

MARK 明天用

jason87629 2011-07-01

打赏
举报

可以了！！！谢谢！！4楼得朋友！！

lvyichang 2011-07-01

打赏
举报

[Quote=引用 7 楼 jason87629 的回复:]
都试过了，不行啊！！！

到底是为什么啊！！！！？？？
[/Quote]
4楼不行？？
我试了都可以啊！！

jason87629 2011-07-01

打赏
举报

都试过了，不行啊！！！

到底是为什么啊！！！！？？？

mamxfx 2011-07-01

打赏
举报

[Quote=引用 2 楼 net_lover 的回复:]
居中方法

CSS code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<style>
……
[/Quote]

这种可以。。。

呆子罗 2011-07-01

打赏
举报

建议设定全局样式在去写css兼容
table,div,input,ul,li,td,tr{margin:0;padding:0;border:none;}

lvyichang 2011-07-01

打赏
举报

ie6,ie8

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>无标题页</title>

      <style type="text/css">

        html, body

        {

            height: 100%;

            overflow: auto;

        }

        body

        {

            padding: 0;

            margin: 0;

        }

    </style>

</head>

<body>

    <form id="form1" runat="server" style="height: 100%">

    <table border="0" cellpadding="0" cellspacing="0" width="100" style="height: 100%; width: 100%;">

        <tr>

            <td align="center" valign="middle">

                <div style="width:350px;">

                            垂直水平居中

                </div>

            </td>

        </tr>

    </table>

    </form>

</body>

</html>

pineapplemi 2011-07-01

打赏
举报

看看 IE 各个版本的兼容

孟子E章 2011-07-01

打赏
举报

居中方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<style>

		html,body{height:100%}

		</style>

<body>

<div id="main" style="height:100%; width:100%;background:green">

<div id="div1" style="width: 350px;margin:auto;height:100%; background:Red">

    <table border="1" style="height:100%;width:100%">

    <tr>

    <td align="center" valign="middle">

    <ul>

    <li>登录账号 <input id="Text1"  name="login_id" type="text" onkeydown="if(event.keyCode==13)event.keyCode=9;" style="width:160px;" /></li>

    <li></li>

    <li>登录密码 <input id="Password1" name="login_pw" type="password" onkeydown="if(event.keyCode==13){document.getElementById('Button1').click();return false;}" style="width:160px" /></li>

    <li></li>

    <li style="text-align:left;margin:10px 0 0 20%;">

    <input id="Button1" type="button" runat="server" value="登 录" onserverclick="Button1_Click" onclick="if(button())"/>

    <input id="Button2" type="button" value="重 置" style="margin:0 0 0 10%;" /></li>

    </ul>

    </td>

    </tr>

    </table>

</div>

</div>