CSS satır içi bloklama sorunu karışık metin ve boş div ile

Question

div s (display: inline-block ayarlandığında boş veya metin ile) bir hizalama sorunum var. Örnek için aşağıdaki resme bakın: Gördüğünüz gibi

, metin ile div s nasılsa div s geri kalanı ile aynı hizada değildir. Sorunumun çalışan bir örneği için bkz. this JSFiddle.

Bu sorunu düzeltmenin bazı yollarını zaten biliyorum ama neden olduğunu anlamak istiyorum. Amacım, bu sorunu en az CSS değişiklikleri ile çözmektir (muhtemelen HTML modifikasyonu olmadan).

HTML

<div class="bar"> 
    <div class="actors"> 
    <div class="actor" style="background-image: url('http://lorempixel.com/32/32/')"></div> 
    <div class="actor" style="background-image: url('http://lorempixel.com/32/32/')"></div> 
    <div class="actor num"><span>5</span></div> 
    <div class="actor" style="background-image: url('http://lorempixel.com/32/32/')"></div> 
    <div class="actor num"><div>6</div></div> 
    </div> 
    <div class="lol">lol</div> 
</div> 

CSS

.bar { 
    height: 40px; 
    border-bottom: 1px solid #000; 
} 
.actors { 
    float: left; 

} 
.actor { 
    display: inline-block; 
    width: 34px; 
    height: 34px; 

    background-color: gray; 
    border-radius: 16px; 
    border: 1px solid red; 
} 
.num { 

} 
.lol { 
    float: right; 
} 

Answer 1

nedeni vertical-align varsayılan değeri, her metin sahiptir. İlk değer baseline değerine sahiptir ve bu nedenle yönlendirme başlangıçtadır.

.actor { 
    vertical-align: top; 
} 

Demo: JSFiddle

Answer 2

Ben kullanmayı tercih ediyorum

.actor { 
    vertical-align: middle; 
} 

üst buradan sorunu giderir

en kolay ve en akıllı yolu vertical-align: top; bunu ayarlamaktır düzeltmek için ama hepsini çizginin üstüne iter. Alt tersini yapar. Teknik olarak, her iki şekilde de hizalanmışlar. Öyleyse neden daha fazla anlaşmazlıkları önlemek için onları gerçek ortada hizalamayın. ilave

JFiddle