मिश्रित पाठ और खाली div

Question

के साथ सीएसएस इनलाइन-ब्लॉक रैप समस्या मेरे पास display: inline-block सेट होने पर div एस (मिश्रित खाली या पाठ के साथ) की संरेखण समस्या है। एक उदाहरण के लिए निम्न छवि देखें:

आप देख सकते हैं, पाठ के साथ div रों किसी भी तरह div रों के बाकी के साथ गठबंधन नहीं कर रहे हैं। मेरी समस्या के एक उदाहरण उदाहरण के लिए this JSFiddle देखें।

मुझे पहले से ही इस समस्या को ठीक करने के कुछ तरीके पता हैं लेकिन मैं समझना चाहता हूं कि ऐसा क्यों होता है। मेरा लक्ष्य कम से कम सीएसएस परिवर्तनों के साथ इस समस्या को हल करना है (संभवतः कोई 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> 

सीएसएस

.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

कारण vertical-align का डिफ़ॉल्ट मान, हर पाठ है जो है। इसका शुरुआती मूल्य baseline है और इस प्रकार अभिविन्यास बेसलाइन पर है।

.actor { 
    vertical-align: top; 
} 

डेमो:: JSFiddle

Answer 2

मैं उपयोग करने के लिए पसंद करेंगे

.actor { 
    vertical-align: middle; 
} 

शीर्ष यहां आपकी समस्या को ठीक करता

सबसे आसान और होशियार जिस तरह से यह vertical-align: top; के लिए सेट करने के लिए है तय करने के लिए लेकिन यह उन्हें लाइन के शीर्ष पर धक्का देता है। नीचे विपरीत करता है। तकनीकी रूप से बोलते हुए, वे अभी भी किसी भी तरह से गठबंधन कर रहे हैं। तो किसी भी और संघर्ष को रोकने के लिए, उन्हें वास्तविक मध्य में क्यों नकारें।

JFiddle