TextBox对齐问题

Question

我想将文本框全部对齐在中间，并在其两侧写下我的标签，如下所示：

但无论我做什么，我都无法将盒子放到中心位置。我可以改变每个盒子的边距并实现这个目标，但是还有其他任何方法可以同时完成。

非常感谢

这是我的代码

＆＃13;

＆＃13;

.form {
  width: 50%;
  margin: 0 auto;
  background-color: aqua;
}
.input {
  margin: 0 auto;
}
.labels {
  margin-right: 20px;
  text-align: right;
}
.vinni {
  text-align: right;
}

＆＃13;

<div class="container">
  <div class="adjustments">
    <div class="form">
      <!-- section 1 -->
      <div class="Title">
        <label class="labels">Title</label>
        <input class="input" type="text" placeholder="Select One or Enter Your Own" list="title" size="30" required>
        <datalist id="title">
          <option value="Title-1"></option>
          <option value="Title-2"></option>
          <option value="Title-3"></option>
          <option value="Title-4"></option>
        </datalist>
      </div>
      <p></p>

      <div class="name">
        <label class="labels">Name</label>
        <input class="input" type="text" placeholder="FirstName, LastName" size="30" required>
      </div>
      <p></p>

      <div class="phone">
        <label>Phone Number</label>
        <input type="tel" placeholder="+1 234 584 9876" size="30">
        <label>(optional)</label>
      </div>

      <div class="email">
        <label class="vinni">Email address</label>
        <input type="email" placeholder="add@me.com" size="30" required>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

_{注意：可能有一些css完全没必要，我用它们进行试错测试。请忽略它们。}

Answer 1

这可能会有所帮助

.form{
width: 80%;
margin: 0 auto;
background-color: aqua;
      padding: 20px 5px;
}
.input{
   margin:0 auto;

}
.labels, label {
    text-align: right;
    width: 30%;
    display: inline-block;
}
input {
    width: 35%;
    display: inline-block;
}
.form > div label:not(:nth-child(1)) {  
    text-align: left;
}
.vinni{
    text-align: right;
}

<div class="container">
<div class="adjustments">
 <div class="form">
    <!-- section 1 -->
     <div class="Title">
         <label class="labels">Title</label>
         <input class="input" type="text" placeholder="Select One or Enter Your Own" list="title" size="30" required>
         <datalist id="title">
            <option value="Title-1"></option>
            <option value="Title-2"></option>
            <option value="Title-3"></option>
            <option value="Title-4"></option>      
         </datalist>
     </div><p></p>

     <div class="name">
         <label class="labels">Name</label>
         <input class="input" type="text" placeholder="FirstName, LastName" size="30" required>
     </div><p></p>

     <div class="phone">
        <label>Phone Number</label>
        <input type="tel" placeholder="+1 234 584 9876" size="30">
        <label>(optional)</label>
     </div><p></p>

     <div class="email">
        <label class="vinni">Email address</label>
        <input type="email" placeholder="add@me.com" size="30" required>
     </div>
   </div>
  </div>
</div>