文本框對齊問題

Question

我希望所有我對齊文本框在中心和寫在它的兩邊我的標籤，像這樣：

但無論我做什麼我不能得到箱子到中心。我可以改變每個箱子的邊距並實現這個目標，但是有什麼其他方式可以一次完成。

非常感謝您

這裏是我的代碼

.form { 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    background-color: aqua; 
 
} 
 
.input { 
 
    margin: 0 auto; 
 
} 
 
.labels { 
 
    margin-right: 20px; 
 
    text-align: right; 
 
} 
 
.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> 
 

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

---

_{注：可能有一些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>