web-dev-qa-db-ja.com

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の中央に（垂直に）配置する最も簡単な方法は何ですか？

csshtmlvertical-alignment
78
Misha Moroshko
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/

90
Marc-François

より現代的なアプローチは、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>

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

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>
57
Holger Will

これはクロスブラウザで動作し、アクセシビリティが向上し、マークアップが少なくなります。 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>
11
albert

この質問は2年以上前に質問されたことは承知していますが、最近の視聴者には、マルクフランソワのソリューションに比べていくつかの利点がある代替ソリューションがあります。

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

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

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

乾杯！

8
MusikAnimal

padding（top and bottom）でdivを使用し、labelおよびinputでvertical-align:middleを使用します。

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

6
Gabriele Petrioli

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

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

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

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