не может центрировать поля ввода внутри div

Я пытаюсь сосредоточить свою форму, но даже пытаясь всеми возможными способами, я не могу этого достичь.не может центрировать поля ввода внутри div

.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, пожалуйста, помогите.

источник

2015-01-19 raghuv

установить .pure-form .pure-group input в display: inline-block вместо display: block в pure-min.css

или просто переопределить его в другой таблице стилей:

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

FIDDLE

источник

2015-01-19 23:53:47 jmore009

Можете ли вы дать некоторое другое решение, как я использую CDN для pure- css и не хотите изменять его после самостоятельного размещения. – raghuv

@raghuv вы можете попробовать просто переопределить его, как я сделал в скрипке? – jmore009

не может центрировать поля ввода внутри div

ответ

Смежные вопросы