내 입력 필드를 수직으로 정렬 내 라벨을 원하는 여기

Question

내 작품은 지금까지 무엇이다 :

http://jsfiddle.net/2RCBQ/

<div id="main"> 
<form> 
    <label>First Name:<input type="text" id="firstname"></label><br/> 
    <label>Last Name:<input type="text" id="lastname"></label><br> 
    <label>E-Mail:<input type="text" id="email"></label><br/> 
    <label>Phone:<input type="text" id="phone"></label><br/> 
</form> 
</div> 

CSS상의 현재

#main { 
    width:300px; 

} 

#main input { 
    float:right; 
    display:inline; 
} 

#main label { 
    color: #2D2D2D; 
    font-size: 15px; 
    width:250px; 
    display: block; 
} 

, 라벨 (왼쪽)은 일종의 입력 필드 (오른쪽)의 맨 위에 있습니다. 입력 필드의 중간에 레이블을 세로로 정렬하고 싶습니다.

세로 정렬을 시도했지만 작동하지 않습니다. 문제를 찾아 내도록 도와주세요. 감사.

Answer 1

당신은

<div id="main"> 
    <form> <span><label>First Name:<input type="text" id="firstname" /></label></span> 
     <br/> <span><label>Last Name:<input type="text" id="lastname" /></label></span> 
     <br/> <span><label>E-Mail:<input type="text" id="email" /></label></span> 
     <br/> <span><label>Phone:<input type="text" id="phone" /></label></span> 
     <br/> 
    </form> 
</div> 

---

CSS 스팬의 vertical-align

middle에 HTML 스팬의 <label> 요소를 넣고 설정할 수 있습니다

#main { 
    width:300px; 
} 
#main input { 
    float:right; 
    display:inline; 
} 
#main label { 
    color: #2D2D2D; 
    font-size: 15px; 
} 
#main span { 
    display: table-cell; 
    vertical-align: middle; 
    width:250px; 
} 

---

http://jsfiddle.net/2RCBQ/2/

Answer 2

HTML :

나는 그래서 우리는 텍스트 레이블에 대한 특정 스타일을 추가 할 수 있습니다 레이블 범위를 추가

<div id="main"> 
    <form> 
     <label><span>First Name:</span><input type="text" id="firstname"></label><br/> 
     <label><span>Last Name:</span><input type="text" id="lastname"></label><br> 
     <label><span>E-Mail:</span><input type="text" id="email"></label><br/> 
     <label><span>Phone:</span><input type="text" id="phone"></label><br/> 
    </form> 
</div> 

CSS :

#main label span { 
    position:relative; 
    top:2px; 
} 

demo을

Answer 3

중첩 느낌 <span>은 불필요한 마크 업을 많이 추가합니다.

display: inline-block 과 같이 문 서 흐름이 중단되지 않고 <label>과 <input>이 서로 옆에 앉을 수 있습니다. 또한 훨씬 유연하며 사용자 (또는 사용자의 스크린 리더)가 font-size을 변경하려는 경우 정렬에 대한 제어를 강화할 수 있습니다.

편집 : jsfiddle

label, input { 
 
    display: inline-block; 
 
    vertical-align: baseline; 
 
    width: 125px; 
 
} 
 

 
label { 
 
    color: #2D2D2D; 
 
    font-size: 15px; 
 
} 
 

 
form, input { 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
} 
 

 
form { 
 
    width: 300px; 
 
}

<form> 
 
    <label for="firstname">First Name:</label><input type="text" id="firstname"> 
 
    <label for="lastname">Last Name:</label><input type="text" id="lastname"> 
 
    <label for="email">E-Mail:</label><input type="text" id="email"> 
 
    <label for="phone">Phone:</label><input type="text" id="phone"> 
 
</form>

Answer 4

당신은 수직 정렬로 인 flexbox의 CSS를 사용할 수 있습니다.

부모 요소를 display-flex으로 감싸기 만하면됩니다.

.display-flex { 
    display: flex; 
    align-items: center; 
} 

Answer 5

나는 다음이 유일한 방법이라고 생각하는 모든 입력 유형에 대한 작품.다른 입력 유형을 정렬하는 가장 간단한 방법이있을 것 때문에

label { display: flex; align-items: center; } 
 
input { margin: 0; padding: 0; }

<label><input type="checkbox">&nbsp; HTML</label> 
 
<label><input type="radio">&nbsp; JS</label> 
 
<label>CSS &nbsp;<input type="text"></label> 
 
<label>Framework &nbsp; 
 
    <select><option selected>none</option></select> 
 
</label>

나는  을 넣어; 그러나 여백은 잘 작동합니다.