Question

我有一个注册表格，我想在中间居中。但是，我的输入字段和按钮不完全对齐。它们的大小相同。按钮是5px宽，但我也试过这个与完全相同的宽度，问题仍然存在。有人可以向我解释为什么会这样吗？我也想知道为什么提交按钮的宽度总是更小，即使它具有相同的值？该网站可在www。http://public-journalism.com/pages/sign_up.php

找到

这是我的HTML代码：

<div id="pjsignup_container">
    <form name="signup" method="post" action='/scripts/loginscript.php'>
        Sign up
        <br>
        <input placeholder="Username" type='text' name='username' id='username'  maxlength="50" />
        <br>
        <input placeholder="Email" type='text' name='email' id='email'  maxlength="50" />
        <br>
        <input placeholder="Re-enter email" type='text' name='email' id='email'  maxlength="50" />
        <br>
        <input placeholder="Password" type='password' name='password' id='password' maxlength="50" />
        <br>
        <input placeholder="Re-enter password" type='password' name='password' id='password' maxlength="50" />
        <br>
        <input type='submit' id="public_journalism_button" name='signup' value='Sign me up!'/>
        <p>By signing up, you agree to our <a href="#">terms of use</a>, <a href="#">privacy policy</a>, <a href="#">and cookie policy</a>.</p>
    </form>
</div>

这是我的css代码：

#pjsignup_container {
    padding: 10px 0px 10px 0px;
}

#pjsignup_container input {
    width: 220px;
    height: 20px;
    margin-top: 10px;
    padding-left: 5px;
}

#pjsignup_container input[type=submit] {
    width: 225px;
    height: 30px;
    color: white;
    background-color: #0072C6;          
    border: 0px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
}

Answer 1

    <center>
    <div id="pjsignup_container">
        <form name="signup" method="post" action='/scripts/loginscript.php'>
            Sign up
            <br>
            <input placeholder="Username" type='text' name='username' id='username'  maxlength="50" />
            <br>
            <input placeholder="Email" type='text' name='email' id='email'  maxlength="50" />
            <br>
            <input placeholder="Re-enter email" type='text' name='email' id='email'  maxlength="50" />
            <br>
            <input placeholder="Password" type='password' name='password' id='password' maxlength="50" />
            <br>
            <input placeholder="Re-enter password" type='password' name='password' id='password' maxlength="50" />
            <br>
            <input type='submit' id="public_journalism_button" name='signup' value='Sign me up!'/>
            <p>By signing up, you agree to our <a href="#">terms of use</a>, <a href="#">privacy policy</a>, <a href="#">and cookie policy</a>.</p>
        </form>
    </div>
    </center>

这里我只用中心标签将它对齐在中间

Answer 2

br似乎导致了错位。在检查器中删除它们可以正确对齐输入。给你的输入保证金：10px auto 0;而不是margin-top：10px; 此外，您的输入似乎是盒子大小：border-box;通过它的行为，输入似乎是内容框。将提交的大小调整为229px以匹配其他输入，否则。

Answer 3

您只需要在包装器元素（width）添加margin和#pjsignup_container。

代码示例

#pjsignup_container {
    width: 220px;
    margin: 0 auto;
    padding: 10px 0px 10px 0px;
}

由于

margin: 0 auto; 
/* is equal to(=) */ 
margin: 0 calc(50% - width/2);

示例

#eg {
 width: 500px;
 margin: 0 auto; /* or */ margin: 0 calc(50% - 500px/2);
}

很高兴有一天。祝你好运

表格输入和按钮不完全对齐

3 个答案: