I am trying to center my form but even trying in all possible ways I can I am not able to achieve it.
.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>The text and buttons in the field are centered but the input fields are not centered I tried adding width to the content but it didn't helped if I add <center> it works But I want to do it with css please help.
set .pure-form .pure-group input to display: inline-block instead of display: block in pure-min.css
or just override it in another stylesheet:
.pure-form .pure-group input{
display: inline-block;
}