Căn giữa dọc trên thẻ liên kết khối nội tuyến

Question

Tôi cần các liên kết và nút của mình trông giống nhau, nhưng tôi không thể căn chỉnh theo chiều dọc văn bản trong thẻ "a" theo cách tương tự như "nút". Điều quan trọng cần lưu ý là các thẻ cần có khả năng xử lý nhiều dòng văn bản (do đó chiều cao dòng sẽ không hoạt động).

a,button { 
    display: inline-block; 
    -moz-box-sizing: border-box; 
    width: 150px; 
    height: 150px; 
    vertical-align: middle; 
    border: 1px solid #000; 
    text-align: center; 
} 

Xem jsfiddle dưới đây:

http://jsfiddle.net/bZsaw/3/

Như bạn thấy, tôi có thể lấy nó để làm việc với một sự kết hợp của một thẻ div bên trong và thiết lập "display: table" vào "a" và thiết lập "display: table-cell" và "vertical-align: middle" cho span, nhưng điều đó không hoạt động trong IE7.

a,button { 
    width: 150px; 
    height: 150px; 
    border: 1px solid #000; 
    text-align: center; 
} 

a { 
    display: table; 
    -moz-box-sizing: border-box; 
} 

a span, button span { 
    vertical-align: middle; 
    text-align: center; 
} 

a span { 
    display: table-cell; 
} 

Tìm kiếm giải pháp CSS đơn giản.

Answer 1

Cách duy nhất đáng tin cậy để tôi đã tìm thấy văn bản class theo chiều dọc và cho phép gói của văn bản nếu nó trở nên quá dài là với một cách tiếp cận 2 container.

Vùng chứa bên ngoài phải có chiều cao dòng ít nhất gấp đôi được chỉ định cho vùng chứa bên trong. Trong trường hợp của bạn, điều đó có nghĩa là:

a { 
    width: 150px; 
    height: 150px; 
    border: 1px solid #000; 
    text-align: center; 
    line-height: 150px; 
    display: block; 
} 

a span { 
    display:inline; 
    display:inline-table; 
    display:inline-block; 
    vertical-align:middle; 
    line-height: 20px; 
    *margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight)/2) + "px" : "0"); 
} 

Thêm dấu phẩy vào thẻ nếu bạn muốn mọi thứ nội tuyến. Dưới đây là ví dụ được cập nhật với văn bản dài trong thẻ A quá .. http://jsfiddle.net/bZsaw/13/

Bạn có thể đặt chiều cao dòng trên khoảng trống cho bất kỳ thứ gì bạn thích và nếu nó nhỏ hơn một nửa chiều cao dòng của gốc, nó sẽ trung tâm VÀ cho phép gói văn bản nếu văn bản của bạn vượt quá chiều rộng vùng chứa gốc. Điều này hoạt động trên tất cả các trình duyệt hiện đại theo như tôi biết.

Answer 2

Nếu văn bản của bạn sẽ không lớn hơn chiều rộng của hộp, bạn có thể đặt chiều cao dòng bằng chiều cao của hộp.

line-height:150px;

Answer 3

Sử dụngline-height:150px; và display-inline:block;