CSS: Làm cách nào để căn chỉnh theo chiều dọc “nhãn” và “đầu vào” bên trong “div”?

Hãy xem xét đoạn mã sau :

HTML:

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

CSS:

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

Phương pháp dễ nhất để đặt labelvà inputở giữa div(theo chiều dọc) là gì?

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>

Ưu điểm của phương pháp này là bạn có thể thay đổi chiều cao của div, thay đổi chiều cao của trường văn bản và thay đổi kích thước phông chữ và mọi thứ sẽ luôn ở giữa.

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

một cách tiếp cận hiện đại hơn sẽ là sử dụng 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>

một ví dụ phức tạp hơn ... nếu bạn có nhiều phần tử trong luồng uốn, bạn có thể sử dụng align-self để căn chỉnh các phần tử đơn lẻ khác với căn chỉnh được chỉ định ...

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>

nó cũng siêu dễ căn giữa theo chiều ngang và chiều dọc:

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>

Điều này hoạt động trên nhiều trình duyệt, cung cấp nhiều khả năng truy cập hơn và đi kèm với ít đánh dấu hơn. bỏ div. Bọc nhãn

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>

Tôi biết rằng câu hỏi này đã được hỏi cách đây hơn hai năm, nhưng đối với bất kỳ người xem nào gần đây, đây là một giải pháp thay thế, có một vài ưu điểm so với giải pháp của Marc-François:

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

Ở đây chúng ta chỉ cần thêm một line-heightbằng chiều cao của div. Lợi thế là bây giờ bạn có thể thay đổi thuộc tính hiển thị của div khi bạn thấy phù hợp, inline-blockchẳng hạn, và nội dung của nó sẽ vẫn được căn giữa theo chiều dọc. Giải pháp được chấp nhận yêu cầu bạn xử lý div như một ô bảng. Điều này sẽ hoạt động hoàn hảo, trên nhiều trình duyệt.

Ưu điểm duy nhất khác là nó chỉ có thêm một quy tắc CSS thay vì hai :)

Chúc mừng!

Sử dụng paddingtrên div( trên và dưới ) và vertical-align:middletrên labelvà input.

ví dụ tại http://jsfiddle.net/VLFeV/1/

Bọc nhãn và nhập vào một div khác có chiều cao xác định. Điều này có thể không hoạt động trong các phiên bản IE thấp hơn 8.

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

Bạn có thể sử dụng thuộc display: table-celltính như trong đoạn mã sau:

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