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，而不是display: block中的pure-min.css

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

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

FIDDLE

不能将div中的输入字段居中

1 个答案: