のTextBox位置合わせの問題

Question

私はすべて中央で私のテキストボックスを整列させ、このように、それのいずれかの側に私のラベルを書きたい：

しかし、関係なく、私は何をすべきか私が取得することはできません箱は中央にある。私はすべてのボックスの余白を変更してこれを達成することができますが、私はそれを一度に行うことができる他の方法があります。私はそれらを使用し、完全に不要といくつかのCSSがある場合があります：

はここで非常に

は私のコード

.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>

---

_{注意ですありがとう試行錯誤のテスト。それらを無視してください。}

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>