Question

我正在尝试简单的个人项目登录页面，问题跟踪应用程序。以下是登录页面的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值为＃34;登录＆＃34;用作此处的登录表单。我想在页面的中心显示表格，并且我使用了以下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;
}

我的问题是该框在谷歌浏览器中正确显示居中，但在Mozilla Firefox中没有对齐。我知道它与CSS规则有关#login元素，但我不知道如何解决它，因为我不太喜欢HTML / CSS。

这是JSFiddle Link- https://jsfiddle.net/m2r1ojg4/

任何帮助将不胜感激。非常感谢你提前。

Answer 1

正如user t.niese指出的那样，问题可以通过不使用display : box属性来解决，而是使用它 -

display: -webkit-flex;
display: -moz-flex;
display: flex;

justify-content: center;

元素以Google Chrome为中心，但不在Mozilla Firefox中

1 个答案: