Làm thế nào để theo chiều dọc gắn kết nhịp với văn bản và hình ảnh

Question

bây giờ tôi đã được tìm kiếm giờ

Vui lòng xem xét mẫu này (rõ ràng không ở đúng nơi!): http://jsfiddle.net/DYLs4/9/

<div id="wrapper"> 
    <span id="text24">Text 24</span> 
    <span id="text12">Text 12</span> 
    <span id="icon"></span> 
</div> 

css:

#text24{ 
    font-size:24px; color:#999; 
} 
#text12{ 
    font-size:12px; color:#000; 
} 
#icon{ 
    height:36px; width:36px; 
    display:inline-block; 
    background:url(some-icon.png); 
}​ 

• Trung tâm theo chiều dọc các text24 (liên quan đến hình ảnh)
• Căn đáy text12 với đáy text24
• Hãy chắc chắn rằng công việc toàn bộ điều trong IE6:Những gì tôi đang cố gắng để đạt được điều này là -> chrome

Rất cám ơn sự giúp đỡ của bạn!

Answer 1

Thêm vertical-align: middle vào hình ảnh của bạn.

EDIT

mỗi ý kiến, giải pháp này cũng đòi hỏi display: inline-block;.

Answer 2

Tôi biết hầu hết các nhà thiết kế đều ghét sử dụng bảng để bố cục, nhưng hãy để tôi thử. Bạn có thể sử dụng valign bảng.

Answer 3

kết quả cuối cùng

http://jsfiddle.net/rizwanabbasi/frsA5/

<div id="wrapper"> 
    <span id="text24">Text 24</span> 
    <span id="text12">Text 12</span> 
    <img src="http://www.adlittle.com/fileadmin/templates/images/rss_feed_icon.png" id="icon"/> 
</div> 

#wrapper{ 
    position:absolute; left:0; 
} 
#text24{ 
    font-size:24px; color:#999; font-weight:bold; 
} 
#text12{ 
    font-size:12px; color:#000; font-weight:bold; } 
#icon{ 
    height:36px; width:36px; 
    display:inline; 
    vertical-align:middle; 
    } 

Answer 4

này đang làm việc

http://jsfiddle.net/rizwanabbasi/frsA5/1/