html - 如何将 2 个输入文本彼此靠近居中？

Question

所以我希望我的注册和后退按钮(都是输入类型:提交)位于中心。问题是即使我使用 margin: auto 也无法正常工作。请注意我已经为此输入设置了宽度。

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

使用这个

<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; 
    }

现场演示 - https://jsfiddle.net/grinmax_/o5rfc8b5/