当浏览器调整大小时，DIV元素中的HTML表不断移动_Html_Css_Browser_Resize

当浏览器调整大小时，DIV元素中的HTML表不断移动

html css browser

当浏览器调整大小时，DIV元素中的HTML表不断移动,html,css,browser,resize,Html,Css,Browser,Resize,我正在尝试生成一个带有登录表单的网页。登录表单组件放置在一个表中，该表位于元素内；一切都完成了，但现在我面临着调整大小的问题：每当我调整浏览器的大小时，表元素都会不断移动，看起来不太好。。。我希望登录表单是固定的，如果我调整浏览器的宽度或高度（或对角线，两者都调整），则不会四处移动下面可以看到我的HTML模板代码： <html> <head> <meta http-equiv="Content-Type" content="text/ht

我正在尝试生成一个带有登录表单的网页。登录表单组件放置在一个表中，该表位于

元素内；一切都完成了，但现在我面临着调整大小的问题：每当我调整浏览器的大小时，表元素都会不断移动，看起来不太好。。。我希望登录表单是固定的，如果我调整浏览器的宽度或高度（或对角线，两者都调整），则不会四处移动

下面可以看到我的HTML模板代码：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
        <link rel="icon" href="images/favicon.ico" type="image/x-icon">
        <title>GIETINF | Management</title>
        <script type="text/javascript" src="scripts/onClick.js"></script>
    </head>

    <body>
        <div id="box">
            <form method="POST" action="login.php">
                <table>
                    <tr>
                      <td align="right"><p id="text">E-mail:</p></td>
                      <td align="left">
                        <input type="text" name="email" value="user@server.pt" onFocus="this.value=''">
                    </td>
                    </tr>
                    <tr>
                      <td align="right"><p id="text">password:</p></td>
                      <td align="left"><input type="password" name="password"></td>
                    </tr>

                    <tr>
                        <table id="little_box">
                            <tr>
                                <td align="left"><input type="submit" value="Log In"></td>
                            </tr>
                            <tr>
                                <td align="left" colspan="2"><input type="reset" value="Reset values"></td>
                            </tr>
                        </table>
                    </tr>
                </table>
            </form>

            <table id="little_box2">
                <tr>
                    <td align="left"> <input type="submit" onClick="OpenEmailtoadmin()" value="Register"></td>
                </tr>
            </table>


        </div> 
    </body>

</html>

对不起，我的文字太长了；我看到其他类似的问题得到了解决，但我似乎没有从中找到一个好的解决方案。

提前谢谢

因为您的桌子没有宽度：

    #box{
        height: 30%;
        left: 50%;
        margin-left: -100px;
        position: absolute;
        top: 35%;
        width: 200px;
    }

   <table style="width:1000px;">
         <tr>
             <td style="width:20%"></td>
             <td style="width:20%"></td>
             <td style="width:20%"></td>
             <td style="width:20%"></td>
             <td style="width:20%"></td>
         </tr>
   </table>


使用这个CSS获得一个中心的形式，你想要在页面中间有一个固定的中心div，不是吗？我希望能够控制网页中的de div元素，但我希望它得到修复，我不希望它随着浏览器的大小而移动。当浏览器最大化时这一切都很好，但是如果我调整它的大小，登录表单就会移动，无法识别。好的，你必须使用绝对值，而不是百分比。位置是相对于你的窗口大小…非常感谢你的wormonic，这就像一个魅力！当我给标签加上宽度时，它们不会随着浏览器的调整而移动。试着给第一行的标签加上宽度，看看我的更新我用了绝对值，就像wormonic告诉我的那样，而且效果很好。谢谢你的帮助！
   <table style="width:1000px;">
         <tr>
             <td style="width:20%"></td>
             <td style="width:20%"></td>
             <td style="width:20%"></td>
             <td style="width:20%"></td>
             <td style="width:20%"></td>
         </tr>
   </table>