CSS：「div」内の「ラベル」と「入力」を垂直方向に揃える方法は？

次のコードを検討してください。

HTML：

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

CSS：

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

置くための最も簡単な方法は何だろうlabelとinputの中間にdiv（縦）？

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>

この方法の利点は、の高さをdiv変更したり、テキストフィールドの高さを変更したり、フォントサイズを変更したりできることです。これにより、すべてが常に中央に留まります。

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

より現代的なアプローチは、cssフレックスボックスを使用することです。

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

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

より複雑な例...フレックスフローに複数の要素がある場合は、align-selfを使用して、指定した位置合わせとは異なる方法で単一の要素を位置合わせできます...

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>

また、水平方向と垂直方向の中央に配置するのも非常に簡単です。

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>

これはクロスブラウザで機能し、アクセシビリティが向上し、マークアップが少なくなります。divを捨てる ラベルを包む

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>

この質問が2年以上前に行われたことは承知していますが、最近の視聴者のために、Marc-Françoisのソリューションに比べていくつかの利点がある代替ソリューションを次に示します。

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

ここではline-height、divの高さと同じ値を追加するだけです。inline-blockたとえば、divの表示プロパティを適切と思われるように変更できるという利点があり、その内容は垂直方向の中央に残ります。受け入れられているソリューションでは、divをテーブルセルとして扱う必要があります。これは完全に機能するはずです、クロスブラウザ。

他の唯一の利点は、CSSルールが2つではなく1つだけであるということです:)

乾杯！

使用padding上のdiv（上部と下部）とvertical-align:middleのlabelとinput。

http://jsfiddle.net/VLFeV/1/の例

ラベルをラップし、定義された高さの別のdivに入力します。これは、8より前のIEバージョンでは機能しない場合があります。

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

display: table-cell次のコードのようにプロパティを使用できます。

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