元素集中在Google Chrome中，但不在Mozilla Firefox中

我正在尝试一个个人项目的简单登录页面，一个问题跟踪应用程序。这是登录页面的HTML代码-

<!Doctype html>
<html>
<head>
    <title>All Issues</title>
    <meta http-equiv="content-type" charset="utf-8" content="text/html"/>
    <link rel="stylesheet" href="css/main.css"  type="text/css" />
    <link rel="shortcut icon" type="image/png" href="img/favicon.png" />
</head>
<body>
<header>
    <h1>All Issues</h1>   
    <h3>A centralized issue tracking system, for customers and dev teams. &nbsp;  <a href="about.html">Learn More</a></h3>
</header>
<section>
    <h3>Dont' have an account? <a href="signup.jsp">Sign Up here</a></h3>
</section>
<table id="login">
    <thead>
        <tr>
            <th>Developer Login</th>
            <th>Customer Login</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="2" id="forgotpass">
                <a href="reset_password.jsp">I forgot my password</a>
            </td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>
                <form action="/login" method="post" id="devlogin">
                    Email: <input type="email" id="devUName" required="required" /><br>
                    Password: <input type="password" id="devPass" required="required" /><br>
                    <input type="submit" value="Log In" id="devSubmit" />
                </form>
            </td>
            <td>
                <form action="/login" method="post" id="custlogin">
                    Email: <input type="email" id="custUName" required="required" /><br>
                    Password: <input type="password" id="custPass" required="required" /><br>
                    <input type="submit" value="Log In" id="custSubmit" /><br>
                </form>
            </td>
        </tr>
    </tbody>
</table>
</body>
</html>

id值为"login"的表用作此处的登录表单。我想在页面中央显示表格，我使用了以下CSS来实现这一目的-

header  {
    text-align : center;
    background : #D3E3E8; 
    font-family : "Cambria", Times, serif;
    font-size: 16px;
}
section {
    text-align : center;
    background : #D3E3E8; 
}
body    {
    padding : 0px;
    margin : 0px;
}
#login  {
    margin: 1em;
    display: -moz-box;
    -moz-box-orient: vertical;
    -moz-box-align: center;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-align: center;
    display: box;
    box-orient: vertical;
    box-align: center;
    border : 1px solid black;
}
#forgotpass {
    text-align : center;
}
th, td  {
    text-align : right;
    padding : 0.5rem;
}
th  {
    font-weight : bold;
    text-align : center;
}

我的问题是，该框在Google Chrome中正确居中显示，但在Mozilla Firefox中却没有，因为它是左对齐的我知道这与#login元素的CSS规则有关，但我不知道如何修复它，因为我不太喜欢HTML/CSS。

这是JSFiddle链接-https://jsfiddle.net/m2r1ojg4/

如有任何帮助，我们将不胜感激。事先非常感谢。

正如用户t.niese所指出的，这个问题可以通过不使用display : box属性来解决，而是使用这个-

display: -webkit-flex;
display: -moz-flex;
display: flex;
justify-content: center;

相关内容

最新更新

热门标签：