Voglio che la mia etichetta per allineare verticalmente Con il mio campo di ingresso

Question

Ecco quello che il mio lavoro è così lontano:

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

Attualmente, l'etichetta (sulla a sinistra) è un po 'come in cima al campo di input (a destra). Voglio allineare verticalmente in modo tale l'etichetta poiché nel mezzo del campo di input.

Ho provato l'allineamento verticale e non funziona. Per favore aiutami a cercare di capire il problema. Grazie.

Answer 1

È possibile racchiudere gli elementi <label> in un arco e impostare il lasso vertical-align al middle

HTML

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

aggiungo arco nella tua etichetta in modo che possiamo aggiungere stile specifico per l'etichetta di testo:

<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

Mi sento nidificare <span> aggiunge un sacco di markup inutile.

display: inline-block consente allo <label> e <input> di sedersi uno accanto all'altro come con float: right ma senza interrompere il flusso del documento. Inoltre è molto più flessibile e consente un maggiore controllo sull'allineamento se tu (o lo screen reader dell'utente) vuoi cambiare il 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

È possibile utilizzare FlexBox css per allineamento verticale.

Basta avvolgere l'elemento genitore display-flex.

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

Answer 5

penso che il seguente è l'unico metodo che funziona per tutti i tipi di ingresso.

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>

metto   perché sembra essere il modo più semplice per allineare diversi tipi di input; tuttavia, i margini funzionano bene.