无法在 div 内居中输入字段

Question

我正在尝试使我的表格居中，但即使我尝试了所有可能的方法我也无法实现它。

.content {
  margin: 0 auto;
  padding: 0 1em;
  max-width: 768px;
  text-align: center;
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>::Members Area::</title>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/pure/0.4.2/pure-min.css">
  </head>
  <body>
    <div class="page-wrap">
      <div class="header">
        <h1>heading</h1>
        <h2 id="msg">Heading</h2>
      </div>
      <div class="content">
        <form class="pure-form" action="" method="post" id='loginform'>
          <div class="fields">
            <fieldset class="pure-group center" >
              <input type="text" required autofocus class="pure-input-1-2" value="" name="username" id="username" placeholder="Username">
              <input type="password" required class="pure-input-1-2" name="password" id="password" placeholder="Password">
              <input type="email" class="pure-input-1-2" value="" name="email" id="email" placeholder="Email">
              <input type="hidden" name="type" value="login" id="type">
            </fieldset>
          </div>
          <button type="submit" class="pure-button pure-input-1-2 pure-button-primary" name="loginbutton" id="button" value="login">Sign in</button>
          <div class="login-links"> 
            <a href="#" id="forgt">Forgot password ?</a>
            <a href="#" id="signin">Already have an account ?  <strong>Sign in</strong></a>
            <br />
            <a href="#" id="signup">Don't have an account ? <strong>Sign Up</strong></a>
          </div>   
        </form>
      </div>
    </div>
  </body>
</html>

字段中的文本和按钮居中但输入字段未居中我尝试向内容添加宽度但如果我添加它没有帮助 <center> 它有效但我想这样做css请帮助。

Answer 1

将 .pure-form .pure-group input 设置为 display: inline-block 而不是 pure-min.css

中的 display: block

或者只是在另一个样式表中覆盖它：

.pure-form .pure-group input{
   display: inline-block;
}

FIDDLE

无法在 div 内居中输入字段

can not center input fields inside div

html

css

css-position

centering