I Want My Label pionowo wyrównać z moim polu wprowadzania

Question

Oto jaka jest moja praca do tej pory:

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; 
} 

Obecnie etykieta (na po lewej) jest trochę w kierunku do góry pola wejściowego (po prawej). Chcę je wyrównać w pionie, tak aby etykieta znajdowała się pośrodku pola wejściowego.

Próbowałem wyrównać w pionie i nie działa. Pomóż mi spróbować rozwiązać problem. Dzięki.

Answer 1

Można załączyć <label> elementów rozpiętości i ustawić vertical-align do middle

HTML rozpiętości za

<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

#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:

dodam rozpiętość w etykiecie więc możemy dodać styl specyficzny dla wytwórni tekstem:

<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

Czuję zagnieżdżanie <span> dodaje wiele niepotrzebnych znaczników.

display: inline-block pozwala <label> i <input> siedzieć obok siebie, podobnie jak z float: right, ale bez łamania przepływu dokumentów. Dodatkowo jest znacznie bardziej elastyczny i pozwala na większą kontrolę nad wyrównaniem, jeśli ty (lub czytnik ekranu użytkownika) chcesz zmienić font-size.

Edit: 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

Można użyć schematu flexbox css do pionowej wyrównać.

Wystarczy owinąć element nadrzędny display-flex.

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

Answer 5

Myślę, że po to jedyna metoda, która działa dla wszystkich typów wejść.

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>

kładę   ponieważ wydaje się być najprostszym sposobem, aby wyrównać różne typy wejściowych; jednak marginesy działają dobrze.