दो अवधि तत्व लंबवत

Question

संरेखित नहीं करते हैं div के बीच में संरेखित करने के लिए मेरे पास div के अंदर दो span तत्व हैं।

<div class="position"> 
    <span class="yours">Your current position：</span> 
    <span class="name">New York</span> 
</div> 

शैली:

.position{ 
    height:70px; 
    background-color:gray; 
} 
.position span{ 
    line-height:70px; 
} 
.position .name{ 
    font-size:28px; 
} 

Live Demo

आप देख सकते हैं, span.yours बीच में नहीं है।

और अगर मैं शैली को दूर:

.position .name{ 
    font-size:28px; 
} 

यह काम करेंगे।

समस्या क्या है?

Answer 1

समस्या तथ्य यह है कि दोनों बच्चों baseline की एक प्रारंभिक ऊर्ध्वाधर- align मूल्य में निहित है (जैसा कि सभी करते हैं तत्व जो inline-formatting context में भाग लेते हैं) - इसलिए फ़ॉन्ट आकार को बढ़ाने पर, .yours अपने इनलाइन भाई के baseline के साथ गठबंधन बना हुआ है। fiddle

.position span { 
    vertical-align: middle; 
} 

Answer 2

उपयोग स्थिति को नियंत्रित करने ऊर्ध्वाधर संरेखण:

.position span { vertical-align:middle;} 

यहाँ परिणाम है: http://jsfiddle.net/WDfyr/3/