Đây có phải là giải pháp đơn giản và linh hoạt nhất để sắp xếp văn bản theo chiều dọc trong một phần tử khối không?

Question

tôi có thể là người đầu tiên khám phá này (tài liệu hay ít nhất nó trên web):

HTML:

<div>Vertically Aligned Text<span></span></div> 

CSS:

div 
{ 
    height: 100px; /* or whatever % etc. */ 
} 

div > span 
{ 
    display: inline-block; 
    visibility: hidden; 
    height: 100%; 
    vertical-align: middle; 
} 

Nó hoạt động vì mã tăng chiều cao dòng tới 100% vùng chứa của nó, nhưng tôi không hiểu tại sao thiết lập vertical-align: middle; trên <span></span> ảnh hưởng đến văn bản.

Tôi chưa tìm thấy giải pháp này được ghi trên web và giải pháp này đơn giản và linh hoạt hơn những thứ khác mà tôi đã tìm thấy. Plus nó sẽ làm việc trên tất cả các trình duyệt từ IE6 trở đi (rõ ràng là thay thế bộ chọn con với cái gì khác).

Để phù hợp với yêu cầu câu hỏi, đây có phải là giải pháp đơn giản và linh hoạt nhất cho câu hỏi cũ?

Answer 1

Tôi tìm thấy bằng cách sử dụng thuộc tính hiển thị CSS table-cell phương pháp dễ nhất.

Xem này jsFiddle

Và CSS:

div 
{ 
    height:100px; /* or whatever % etc. */ 
    border: solid 1px black; 
    vertical-align : middle; 
    display : table-cell; 
} 

Answer 2

Bài viết này mô tả tất cả các kỹ thuật xếp thẳng dọc (mà tôi biết tắt :)), inclusing cách tiếp cận bạn mất. http://phrogz.net/css/vertical-align/index.html