Question

我不擅于在纯HTML中编写UI ...现在我正在尝试用纯CSS在css中创建一个简单的登录页面，但不知怎的，我无法从这里获取Login按钮{{3以中心为中心。

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

此样式是否适用于表格行元素？

有人可以给我一个建议吗？

Answer 1

抱歉，我的小提琴有些问题。所以我在这里复制/粘贴它。

试试这个：

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;
    }
    }

<p>中的中心字段不起作用

1 个答案: