CSS: come allineare verticalmente una "etichetta" e un "input" all'interno di un "div"?

Considera il codice seguente :

HTML:

<div>
    <label for='name'>Name:</label>
    <input type='text' id='name' />
</div>

CSS:

div {
    height: 50px;
    border: 1px solid blue;
}

Quale sarebbe il metodo più semplice per mettere il labele il inputal centro di div(verticalmente)?

div {
    display: table-cell;
    vertical-align: middle;
    height: 50px;
    border: 1px solid red;
}

<div>
    <label for='name'>Name:</label>
    <input type='text' id='name' />
</div>

Il vantaggio di questo metodo è che puoi cambiare l'altezza del divcampo di testo, cambiare l'altezza del campo di testo e cambiare la dimensione del carattere e tutto rimarrà sempre al centro.

http://jsfiddle.net/53ALd/6/

un approccio più moderno sarebbe usare css flex-box.

div {
  height: 50px;
  background: grey;
  display: flex;
  align-items: center
}

<div>
  <label for='name'>Name:</label>
  <input type='text' id='name' />
</div>

un esempio più complesso ... se hai elementi multipli nel flusso flessibile, puoi usare align-self per allineare i singoli elementi in modo diverso dall'allineamento specificato ...

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

* {
  margin: 10px
}

label {
  align-self: flex-start
}

<div>
  <img src="https://de.gravatar.com/userimage/95932142/195b7f5651ad2d4662c3c0e0dccd003b.png?size=50" />
  <label>Text</label>
  <input placeholder="Text" type="text" />
</div>

è anche super facile da centrare orizzontalmente e verticalmente:

div {
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background: grey;
  display: flex;
  align-items: center;
  justify-content:center
}

<div>
  <label for='name'>Name:</label>
  <input type='text' id='name' />
</div>

Funziona su più browser, offre maggiore accessibilità e viene fornito con meno markup. abbandonare il div. Avvolgi l'etichetta

label{
     display: block; 
     height: 35px; 
     line-height: 35px; 
     border: 1px solid #000; 
}

input{margin-top:15px; height:20px}

<label for="name">Name: <input type="text" id="name" /></label>

So che questa domanda è stata posta più di due anni fa, ma per tutti gli spettatori recenti, ecco una soluzione alternativa, che presenta alcuni vantaggi rispetto alla soluzione di Marc-François:

div {
    height: 50px;
    border: 1px solid blue;
    line-height: 50px;
}

Qui aggiungiamo semplicemente solo un line-heightuguale a quello dell'altezza del div. Il vantaggio è che ora puoi modificare la proprietà di visualizzazione del div come ritieni opportuno, ad inline-blockesempio, e il suo contenuto rimarrà centrato verticalmente. La soluzione accettata richiede di trattare il div come una cella di tabella. Dovrebbe funzionare perfettamente, cross-browser.

L'unico altro vantaggio è che è solo un'altra regola CSS invece di due :)

Saluti!

Utilizzare paddingsu div(in alto e in basso ) e vertical-align:middlesu labele input.

esempio su http://jsfiddle.net/VLFeV/1/

Avvolgi l'etichetta e inserisci un altro div con un'altezza definita. Potrebbe non funzionare nelle versioni di IE inferiori a 8.

position:absolute; 
top:0; bottom:0; left:0; right:0;
margin:auto;

Puoi usare la display: table-cellproprietà come nel codice seguente:

div {
     height: 100%;
     display: table-cell; 
     vertical-align: middle;
    }