Làm cách nào để căn chỉnh văn bản theo chiều dọc?

Question

Làm cách nào để căn chỉnh theo chiều dọc văn bản trong div được thả nổi? Ví dụ: Tôi có nội dung động với chiều cao cố định. nếu nội dung nhỏ hoặc lớn, nó phải tự động căn chỉnh theo chiều dọc.

Cảm ơn

Answer 1

Các ô bảng là giải pháp dễ nhất.

Javascript là một thay thế (đo kích thước và kích thước văn bản của div, sau đó điều chỉnh padding hoặc lineheight hoặc bất kỳ thứ gì).

chỉnh sửa: Hoặc css tuyệt vời này:

CSS

div#container { 
    border: solid 1px; 
    height: 300px; 
} 

div#content { 
    border: solid 1px; 
} 

div#balance { 
    border: solid 1px; 
    /* gotta be 100% */ 
    height: 100%; 
} 

div.valign { 
    /* firefox 2 */ 
    display: -moz-inline-box; 
    /* everybody else */ 
    display: inline-block; 

    vertical-align: middle; 
} 

/* IE 6 and 7 hack */ 
html* div.valign { 
    display: inline; 
} 

HTML

<div id="container"> 
    <div id="balance" class="valign"></div> 
    <div id="content" class="valign"> 
     Blah blah blah blah<br/> 
     Blah blah blah blah<br/> 
     Blah blah blah blah<br/> 
     Blah blah blah blah<br/> 
     Blah blah blah blah 
    </div> 
</div> 

Được nghĩa để thực hiện một bài viết trên blog về vấn đề này trong một thời gian, tôi nghĩ rằng đó là thời gian.

Answer 2

Tôi biết điều này sẽ làm hỏng danh tiếng của tôi, nhưng ... sử dụng ô trong bảng. Bất kỳ giải pháp CSS trình duyệt chéo nào cho việc căn chỉnh theo chiều dọc sẽ khó gấp đôi để duy trì, lạc quan.

Answer 3

Bạn đã thử căn chỉnh dọc: giữa; ?

Answer 4

<div style="display: table-cell; vertical-align: middle;">I'm in the middle!</div> 

Answer 5

Chris Coyier đã viết một hướng dẫn tuyệt vời trên chỉ này: http://css-tricks.com/vertically-center-multi-lined-text/

Tôi đã sử dụng nó bản thân mình, và nó hoạt động hoàn hảo.

Answer 6

Tôi đã gặp vấn đề này trước đây. Tôi sẽ trích dẫn các chuyên gia vì vậy tôi không giả mạo điều này: "... đối tượng bên trong được đặt hoàn toàn bằng một nửa chiều cao của khu vực. Sau đó được nâng lên một nửa chiều cao của nó."

Điều này có thể được thực hiện với% thay vì pixel chính xác, trong trường hợp dữ liệu được tạo từ cơ sở dữ liệu và chiều cao thay đổi theo từng trang.

Nguồn: here

Demo: liên kết trên trang ở trên

Ở đây đi câu trả lời đầu tiên của tôi ...