Question

如何将输入 html元素置于嵌套 div 元素中。创建了以下小提琴，尝试使用 margin：0 auto; 属性将输入元素居中，这不起作用 http://jsfiddle.net/mc4sj8rv/1/

<div id="login_container">
    <div class="auth-form">
        <div class="auth-input">
            <input id="signup_username" type="text" placeholder="Username">
        </div>
    </div>
</div>

html, body {
    height: 100%;
    margin: 0 auto;
}
#login_container {
    width: 100%;
    height: 100%;
    background: none scroll 0% 0% #F8F8F8;
}
input[type=password] {
    margin: 0 auto;
}

Answer 1

一种解决方案是将text-align: center用于.auth-input：

＆＃13;

html,
body {
  height: 100%;
  margin: 0 auto;
}
#login_container {
  width: 100%;
  height: 100%;
  background: none scroll 0% 0% #F8F8F8;
}
input[type=password] {
  margin: 0 auto;
}
.auth-input {
  text-align: center;
}

＆＃13;

<div id="login_container">
  <div class="auth-form">
    <div class="auth-input">
      <input id="signup_username" type="text" placeholder="Username">
    </div>
  </div>
</div>

＆＃13;

Answer 2

应用text-align：

.auth-input{text-align: center;}

Answer 3

input元素是一个内联元素，因此您无法使用margin:0 auto;将其居中。您可以在父级上使用text-align:center;：

<强> DEMO

Answer 4

内联元素在其父元素上使用text-align: center居中（并且您的选择器无论如何都与您的输入不匹配）。

Answer 5

您可以使用

text-align: center;

将div的内容水平居中。

将输入元素置于嵌套div中

5 个答案: