ortalama problemi

Merhaba arkadaşlar bir türlü çözemediğim basit bir problemim var

yapmaya çalıştığım
resim yazı yanyana iken dikeyde ve yatayda ortalamak






deneme1

        <div style="height: 40px; border: 1px solid; width: 100px;">
                <div style="margin-top: 5px;line-height: 16px; height: 16px; ">
                    <img src="add.png" style="float: left;" >
                    <div style="line-height: 15px; height: 15px; font-size: 12px; float: left">
                        deneme
                    </div>
                </div>
        </div>

En başarılı denememdir
fakat şekilde gördüğünüz üzere sadece dikey ortalama olayını halledebildim

deneme 2

        <div style="height: 40px; border: 1px solid; width: 100px;">            
            <div style="margin-top: 13px;line-height: 16px; height: 16px; text-align: center; ">
                <img src="add.png" style="float: left;" >
                <div style="line-height: 15px; height: 15px; font-size: 12px; float: left">
                    deneme
                </div>
            </div>
        </div>

celp ve hile ile yapmaya çalıştığım bu denememde aslında dikey ortalamadım margin kullandım, fakat yatay ortalamaya çözüm bulmuş değilim, text-align:center; resimlerde işe yaramamakta ne hikmetse



deneme3

display: table-cell;

şeklinde devam eden denemem varki IE tarafından desteklenmediği için eledim

deneme4

        <div style="height: 50px; border: 1px solid; width: 100px;">
                <div style="height: 50px; line-height: 50px; position: relative; text-align: center;">
                    <img src="add.png" style="float: right;  top:50%; margin-top: -8px;" >
                    <span style="float: right">
                        deneme
                    </span>
                </div>
        </div>

Burada text tam olması gerektiği yerde fakat, bu sefer huylarını birtürlü analayamadığım position relative sayesinde resim üst tarafa kaçmış durumda

denemeler böyle uzayıp gidiyor, fakat bir çözüm bulamadım
IE ve bütün browserlarda çalışması önemli

siz ustalarımın önerilerini bekliyorum

saygılarımla..

dıştaki divi position relative yapın, içteki divi de absolute yapın. içteki dive iconun widthi kadar padding left verip iconu sola background image olarak ekleyin. içteki divin width ve heightini ayarladıktan sonra top:50%; left:50%; yapın ve kendisinin heihgtinin yarısı kadar margin top eksi değer verin mesela 20 px yüksekliğindeyse margin-top:-10px; gibi. aynı şekilde padding + width'in yarısı kadar margin left eksi değer verin örneğin 20px padding left + 50 px yazı kısmı dersek, 50+20 = 70 , 70/2 = 35 yani margin-left:-35px; gibi. sorunsuz ortalanacaktır.