Masroor_Shah Masroor_Shah - 3 months ago 12
CSS Question

Centering Button through css?

I want to centre the submit button but when i set align to center it did not work. I seen this question was previously asked but it did not work in my case.
my css code



input[type=submit] {
width:40%;
background-color: #4CAF50;
color:Black;
font-size:16px;
padding: 14px 20px;
border-radius: 4px;
cursor: pointer;
text-align:center;

}





My whole CSS code



div {
border-radius: 5px;
background-color:#efcbcb;
}


.lay{
display:block;
float:left;
height:500px;
width:600px;
text-align:center;
float:right;
}

input[type=submit] {
width:40%;
background-color: #4CAF50;
color:Black;
font-size:16px;
padding: 14px 20px;
border-radius: 4px;
cursor: pointer;
margin:0 auto;

}
.sub{
text-align:center;
}


label{

float: left;
clear: left;
width: 250px;
height:40px;

}
input {
border: 2px solid grey;
float: left;
}





my form Code



<div class="lay">
<p class="reg"><h1>Registration Form</h1></p>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<label>Username:</label> <input type="text" name="username" value="<?php echo $username;?>" id="username" />
<span class="error"> <?php echo $usernameErr;?></span>
<br /><br />
<label>Password:</label> <input type="text" name="password" value="<?php echo $password;?>" id="password" />
<span class="error"> <?php echo $passwordErr;?></span>
<br /><br />
<label>Email: </label> <input type="text" name="email" value="<?php echo $email;?>" id="email" />
<span class="error"> <?php echo $emailErr;?></span>
<br /><br />
<label>Contact:</label> <input type="text" name="contact" value="<?php echo $contact;?>" id="contact" />
<span class="error"> <?php echo $contactErr;?></span>
<br /><br />
<label>Facebook:</label> <input type="text" name="facebook" value="<?php echo $facebook;?>" id="facebook" />
<span class="error"> <?php echo $facebookErr;?></span>
<br /><br />
<label>Cnic No:</label> <input type="text" name="cnic" value="<?php echo $cnic;?>" id="cnic" />
<span class="error"> <?php echo $cnicErr;?></span>
<br /><br />
<label>Expertise:</label><input type="text" name="expertise" value="<?php echo $expertise;?>" id="expertise" />
<span class="error"> <?php echo $expertiseErr;?></span>
<br /><br /><br /><br />
<div class="sub"><input type="submit" name="register" value="Register" id="register" /></div>
</form>
</div>





my result:enter image description here

Answer

Try adding this to your input[type="submit"] CSS:

    left: 50%;
    transform: translate(-50%, -50%)