Làm cách nào để căn chỉnh chiều dọc hình ảnh ở kích thước không xác định với tâm của div?

Question

Tôi có một nút HTML đơn giản mà chứa văn bản và hình ảnh:

HTML:(Đã có trên http://jsfiddle.net/EFwgN)

<span class="Button"> 
    <img src="http://www.connectedtext.com/Image/ok.gif" /> 
    Small Icon 
</span> 

CSS:

span.Button {display:inline-block; margin:2px 4px;padding:3px 6px; 
      background-color:#ddd; height:24px; line-height:24px; 
      vertical-align:middle;} 
span.Button img {vertical-align:middle;} 

tôi có thể không đưa ra kết hợp phù hợp với các yêu cầu sau:

• Hình ảnh và văn bản cần phải theo chiều dọc ở giữa div, với văn bản ở giữa hình ảnh. Nó phải gọn gàng.
• ngang - hình ảnh có thể ở bất kỳ chiều rộng nào và nút sẽ phát triển để hiển thị.
• Theo chiều dọc - hình ảnh có thể ở bất kỳ chiều cao nào, nhỏ hơn hoặc lớn hơn so với nút. Khi hình ảnh lớn hơn, tôi không bận tâm nếu các pixel thừa được hiển thị hoặc cắt, miễn là nó được căn giữa.
• Nút ở độ cao cố định. Hiện tại tôi sử dụng line-height để căn giữa văn bản.
• Nút phải nằm độc đáo phù hợp với các nút và văn bản khác.
• Các giải pháp cần phải làm việc trên tất cả các phiên bản mới nhất của trình duyệt chính, và Internet Explorer 8.

Dưới đây là một jsfiddle với mã hiện tại của tôi: http://jsfiddle.net/EFwgN
(chú ý vào biểu tượng nhỏ là hơi thấp hơn trung tâm của nút)

Answer 1

Một giải pháp đơn giản, nếu bạn cần không ít hơn IE8 (trong chế độ tiêu chuẩn): http://jsfiddle.net/kizu/EFwgN/31/

Chỉ cần thêm margin: -100px 0-img, do đó lợi nhuận tiêu cực sẽ ăn bất kỳ chiều cao lớn:

span.Button img {vertical-align:middle; margin:-100px 0; 
       position:relative; top:-2px;} 

Tôi đã thêm position: relative; top:-2px; chỉ để trông nó tốt hơn :)

Nhưng nếu bạn cần hỗ trợ chế độ tương thích hoặc IE lt 8 (vì lý do nào đó), điều có lề sẽ không hoạt động. Vì vậy, bạn sẽ cần một đánh dấu phụ: http://jsfiddle.net/kizu/EFwgN/28/, nhưng nó hơi hacky và chỉ hoạt động với chiều cao của nút cố định (như trong ví dụ của bạn).

Answer 2

Tại sao không làm cho hình ảnh co lại trong trường hợp nó thực sự cao hơn nút?

span.Button img { 
    vertical-align:middle; 
    max-height: 100%; 
} 

Answer 3

Tôi có thể đã bỏ lỡ một số yêu cầu, khi thiết lập span.Button's height to auto đã làm thủ thuật cho tôi.

Nếu những gì bạn muốn là nút tăng trưởng chỉ theo chiều ngang, với tràn dọc cắt, hơn có lẽ tôi muốn làm điều đó như thế này:

span.Button {display:inline-block; margin:2px 4px;padding:3px 6px; 
      background-color:#ddd; width:auto; height:24px; line-height:24px;overflow:hidden; 
      vertical-align:middle; 
      } 

sử dụng một chút javascript để xác định chiều cao img, và sau đó tập trung nó cho phù hợp.

Answer 4

Sử dụng màn hình dựa trên bảng. Yêu cầu thu hẹp hình ảnh do xung đột giữa display:table-cell; và height:24px. Rất giống với nỗ lực aborted của bạn từ các ý kiến, nhưng bao gồm các yêu cầu display:block; vào hình ảnh: http://jsfiddle.net/shanethehat/5ck3s/

Answer 5

Có bạn đi, sử dụng jQuery:

$(".button img").load(function() 
      { 
       $(this).each(function() 
          { 
           sh = $(this).outerHeight(); 
           if (sh > 24){ 
           alert(sh); 
           $(this).css("margin-top", - (sh - 24)/2 + 'px'); 
           } 
          }); 
      }); 

Chỉnh sửa: Chỉ cần thấy rằng bạn muốn nó tinh khiết CSS, cũng , đây là đoạn mã tìm ra!:)

Answer 6

Làm thế nào về ... điều này?

http://jsfiddle.net/92K8J/

Added display:inline-block đến những hình ảnh, và loại bỏ các cố định height của container.