CSS Inline-Block Wrap Problem mit gemischtem Text und leeren div

Question

Ich habe ein Alignment-Problem von div s (gemischt leer oder mit Text), wenn display: inline-block gesetzt ist. Siehe das folgende Bild für ein Beispiel:

Wie Sie sehen können, die div s mit dem Text irgendwie nicht mit dem Rest des div s ausgerichtet ist. Siehe this JSFiddle für ein funktionierendes Beispiel meines Problems.

Ich kenne bereits einige Möglichkeiten, um dieses Problem zu beheben, aber ich möchte verstehen, warum es passiert. Mein Ziel ist es, dieses Problem mit minimalen CSS-Änderungen (möglicherweise ohne HTML-Änderung) zu lösen.

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

Der Grund dafür ist der Standardwert von vertical-align, die jeder Text hat. Es hat den Anfangswert baseline und somit ist die Ausrichtung auf Basislinie.

Die einfachste und cleverste Weg zu fixieren es vertical-align: top; zu setzen:

.actor { 
    vertical-align: top; 
} 

Demo: JSFiddle

Answer 2

Ich würde es vorziehen

.actor { 
    vertical-align: middle; 
} 

oben behebt das Problem hier zu verwenden, aber es drückt sie alle an die Spitze der Linie. Unten tut das Gegenteil. Technisch gesehen sind sie immer noch in irgendeiner Weise ausgerichtet. Warum also nicht in der Mitte ausrichten, um weitere Konflikte zu vermeiden.

JFiddle