html - 中的居中字段不起作用

Question

我不擅长用纯 html 编写 UI...现在我正尝试在 css 中用纯 html 创建一个简单的登录页面，但不知何故我无法从这里获得登录按钮 https://jsfiddle.net/2oxz5oja/居中。

p {
    display: table-row;
    text-align: center;
}

这种样式适用于表格行元素吗？

这里有人可以给我建议吗？

Answer 1

抱歉，我的 Fiddle 有问题。所以我将它复制/粘贴到这里。

试试这个:

HTML

 <h3>Login here</h3>

<div id="loginMenu" class="mainDiv">
    <form id="login-form" name="login-form" method="post" action="/konferencje-web/login.xhtml" enctype="application/x-www-form-urlencoded">
        <input type="hidden" name="login-form" value="login-form" />
        <p>
            <label for="login-form:login" class="input-form">Login:</label>
            <input id="login-form:login" type="text" name="login-form:login" class="input-form" />
        </p>
        <p>
            <label for="login-form:password" class="input-form">Password:</label>
            <input id="login-form:password" type="password" name="login-form:password" value="" class="input-form" />
        </p>
        <p>
            <input id="login-form:button" class = "login" type="submit" name="login-form:button" value="Login" />
        </p>
        <p>
<a href="#" onclick="mojarra.jsfcljs(document.getElementById('login-form'),{'login-form:j_idt21':'login-form:j_idt21'},'');return false">Info page</a>
        </p>
    </form>
</div>

</html>

CSS

   body {
        background-color: #6B2424;
    }
    form {
        display: table;
    }
    input {
        display: table-cell;
        margin: 0 auto;
    }
    label {
        display: table-cell;
    }
    p {
        display: table-row;
        text-align: center;
    }
    li {
        list-style-type: none;
        line-height: 150%;
    }
    a {
        color: #000000;
        line-height: 30px;
        vertical-align: middle;
        text-align: center;
    }
    h1, h3 {
        color: wheat;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
    }
    td {
        text-align: center;
    }
    select {
        min-width: 150px;
    }
    #login-form {
        margin:0 auto;
        text-align: center;
        width: 50%
    }
    .mainDiv {
        text-align: center;
        background-color: bisque;
        width: 500px;
        border:2px solid;
        border-radius:25px;
        line-height: 30px;
        vertical-align: middle;
        margin:0 auto;
    }
    .login
    {
    position: relative;
    left: 120px;
    }
    }