텍스트 상자의 정렬 문제

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>