How can I center 2 input text close to each other? - html

Question

So i want my sign up and back button (both are input type: submit) to be at the center. The problem is it's not working even if i used margin: auto. Please take note I already set width for this input.
enter image description here
* {
margin: 0;
padding: 0;
}
body {
font-size: 14px;
background-image: url("StockSnap_FS24L3X9BH.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.container {
width: 50%;
margin: 10px auto;
display: block;
}
.row {
width: 80%;
margin: 10px auto;
padding: 20px;
}
input:not([type=submit]):not([name=age]) {
width: 50%;
clear: left;
}
label {
display: inline-block;
width: 150px;
float: left;
text-align: left;
}
input[type=submit] {
width: 100px;
margin: 0 auto;
}
input[name=age] {
width: 60px;
}
#gender {
width: 100px;
}
<?php
include_once("code2_registration.php");
?>
<div class="container">
<h1 style="text-align: center"> Membership Forum </h1>
<div class="row">
<form action="register.php" method="POST">
<p> Please fill the following form to complete the registration. </p> <br/>
<label>Username:</label> <input type="text" name="username" /> <br/><br/>
<label>Password:</label> <input type="password" name="password" /> <br/><br/>
<label>First Name:</label> <input type="text" name="firstName" /> <br/><br/>
<label>Last Name:</label> <input type="text" name="lastName"> <br/><br/>
<label>Email Address:</label> <input type="text" name="email"> <br/><br/>
<label>Sex: </label><select name="gender" id="gender">
<option value="male"> Male </option>
<option value="female"> Female </option>
<option value="others"> Others </option>
<option value="others"> Prefer not to say </option>
</select> <br/><br/>
<label>Age:</label> <input type="number" name="age"> <br/><br/>
<input type="submit" name="submit" value="Sign Up" id="submit">
<input type="submit" name="back" value="Back" id="back">
</form>
</div>
</div>

Answer 1

Use this
<div class="container">
<h1 style="text-align: center"> Membership Forum </h1>
<div class="row">
<form action="register.php" method="POST">
<p> Please fill the following form to complete the registration. </p> <br/>
<label>Username:</label> <input type="text" name="username" /> <br/><br/>
<label>Password:</label> <input type="password" name="password" /> <br/><br/>
<label>First Name:</label> <input type="text" name="firstName" /> <br/><br/>
<label>Last Name:</label> <input type="text" name="lastName"> <br/><br/>
<label>Email Address:</label> <input type="text" name="email"> <br/><br/>
<label>Sex: </label><select name="gender" id="gender">
<option value="male"> Male </option>
<option value="female"> Female </option>
<option value="others"> Others </option>
<option value="others"> Prefer not to say </option>
</select> <br/><br/>
<label>Age:</label> <input type="number" name="age"> <br/><br/>
<div class="center">
<input type="submit" name="submit" value="Sign Up" id="submit">
<input type="submit" name="back" value="Back" id="back">
</div>
</form>
</div>
</div>
.center {
text-align: center;
}
* {
margin: 0;
padding: 0;
}
body {
font-size: 14px;
background-image: url("StockSnap_FS24L3X9BH.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.container {
width:50%;
margin: 10px auto;
display: block;
}
.row {
width:80%;
margin: 10px auto;
padding: 20px;
}
input:not([type=submit]):not([name=age])
{
width: 50%;
clear:left;
}
label {
display: inline-block;
width: 150px;
float: left;
text-align: left;
}
input[type=submit] {
width: 100px;
margin: 0 auto;
}
input[name=age] {
width:60px;
}
#gender {
width:100px;
}
live demo - https://jsfiddle.net/grinmax_/o5rfc8b5/

Answer 2

can't you simple wrap those inputs with a <div> and style it with text-align: center?
<div class="centered-div">
<input type="submit" name="submit" value="Sign Up" id="submit">
<input type="submit" name="back" value="Back" id="back">
</div
.centered-div {
text-align: center;
}
here is the Fiddle with this code https://fiddle.jshell.net/n3mtsrhj/1/

Answer 3

Try wrapping your input buttons in a div like this:
<div class="submit_block">
<input name="submit" value="Sign Up" id="submit" type="submit">
<input id="back" name="back" value="Back" type="submit">
</div>
and then apply css:
.submit_block {
text-align: center;
}