Question

我的代码是：

＆＃13;

<div id="login">
  <h1>Login</h1>
  <p>
    <div class="inp">
      <label for="uid">Username :</label>
      <input type="text" id="uid">
    </div>
    <br>
    <div class="inp">
      <label for="pass">Password :</label>
      <input type="password" id="pass">
    </div>
    <br>
    <div id="loginButton" class="inp">
      <input type="submit" name="submit" value="Log In">
    </div>
  </p>
</div>

＆＃13;

HibernateTemplate

＆＃13;

为什么loginButton水平居中，即使边距设置为自动？

我需要做些什么来解决它？

另外，有没有办法将所有元素（包括两个内部div）水平居中？解决这个问题的最佳方法是什么？

Answer 1

input #loginButton里面的#loginButton { text-align:center; }没有居中（我假设你正在考虑中心）。

position: absolute

坦率地说，你的CSS有很多不那么好的做法。似乎不需要top（因此，left，bottom，right，#login属性都不是必需的。我也不知道你为什么要在padding-right上指定宽度和高度，如果你想让所有内容都集中在#login label，我也不能完全确定#login * { padding: 0; margin: 0; } body { background-image: url("images/indexBg.jpg"); background-attachment: fixed; } #container { padding: 50px; margin: 50px; background-color: #cccfe8; opacity: 0.9; } #login { text-align:center; padding: 10px; background-color: #cccfe8; opacity: 0.9; } #login label { text-align:right; display:inline-block; } #loginButton { display: block; margin: auto; text-align:center; } {1}}。

极大地简化了代码，它看起来像这样：

    <div id="login">
        <h1>Login</h1>
            <div class="inp">
                <label for="uid">Username : </label>
                <input type="text" id="uid">
            </div> <br>
            <div class="inp">
                <label for="pass">Password : </label>
                <input type="password" id="pass">   
            </div> <br>
            <div id="loginButton" class="inp">
                <input type="submit" name="submit" value="Log In">
            </div>
    </div>

#login label

此外，如果您希望将字段标签放在其输入上方，只需将{ display:block; }更改为text-align:right并删除jsonPage = PAGE jsonPage { typeNum = 1234 config { disableAllHeaderCode = 1 : } : }

Answer 2

请在css中添加#loginButton的样式：

 text-align:center;

或者宽度：50像素;

...谢谢

Answer 3

进行水平对齐尝试

<div id="wrapper" style="text-align: center">    
    <div id="yourdiv" style="display: inline-block;">You text</div>
</div>

Answer 4

您的#login ID高度为：15％。不要在ID中使用任何高度，如果您添加了任何其他文本框或任何属性，它将影响高度。

在任何情况下，如果您指定了高度，该框将仅显示在特定高度，因此您可以添加一些增加框的高度。

更改代码：

{{1}}

Answer 5

login {
    width: 20%;
    height: 25%; // make it 25% from 15%. 
    text-align: center; //add this tag to your css code.hope it will help you.
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    margin: auto;

    padding: 10px;
    background-color: #cccfe8;
    opacity: 0.9;
}

为什么loginButton不是水平居中的？

5 个答案: