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 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 เพื่อจัดแนวองค์ประกอบเดี่ยวให้แตกต่างกันไปตามการจัดแนวที่ระบุ ...

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>

ฉันทราบว่ามีการถามคำถามนี้เมื่อสองปีก่อน แต่สำหรับผู้ชมล่าสุดนี่เป็นทางเลือกอื่นซึ่งมีข้อดีบางประการเหนือโซลูชันของ Marc-François:

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

เราก็แค่บวกline-heightเท่ากับความสูงของ div ข้อดีคือตอนนี้คุณสามารถเปลี่ยนคุณสมบัติการแสดงผลของ div ได้ตามที่คุณเห็นว่าเหมาะสมinline-blockเป็นต้นและเนื้อหาจะยังคงอยู่กึ่งกลางในแนวตั้ง โซลูชันที่ยอมรับต้องการให้คุณปฏิบัติกับ div เป็นเซลล์ตาราง สิ่งนี้ควรทำงานได้อย่างสมบูรณ์แบบข้ามเบราว์เซอร์

ข้อได้เปรียบเพียงอย่างเดียวคือมันเป็นเพียงกฎ CSS หนึ่งกฎแทนที่จะเป็นสองข้อ :)

ไชโย!

การใช้งานpaddingบนdiv( ด้านบนและด้านล่าง ) และvertical-align:middleบนและlabelinput

ตัวอย่างที่http://jsfiddle.net/VLFeV/1/

ห่อป้ายกำกับและป้อนข้อมูลใน div อื่นด้วยความสูงที่กำหนด สิ่งนี้อาจใช้ไม่ได้ใน IE เวอร์ชันที่ต่ำกว่า 8

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

คุณสามารถใช้display: table-cellคุณสมบัติตามรหัสต่อไปนี้:

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