Dlaczego ten element bloku śródliniowego ma treść, która nie jest wyrównana w pionie

Question

Oct 18, 2012, 10:41 AM

Dlaczego ten element bloku śródliniowego ma treść, która nie jest wyrównana w pionie

Natknąłem się na dziwny problem z CSS. Czy ktoś może wyjaśnić, dlaczego pudełko zawierające treść nie jest wyrównane w pionie?

Jeśli umieścisz tekst wewnątrz zakresu z klasą.divPutTextToFixIssue - wyrównuje się prawidłowo.

http://jsfiddle.net/KgqJS/88/

<div id="divBottomHeader">
    <div class="divAccountPicker">
       <span class="divPutTextToFixIssue"><span>                 
    </div>
    <div class="divAccountData">
        <span>Balance: $555</span>
    </div>
</div>

#divBottomHeader {
    background-color: #d5dbe0;
    height: 43px;
}
.divAccountPicker {
    display: inline-block;
    background: blue;            
    width: 200px;
    height: 40px;
}
.divAccountData {
    display: inline-block;
    background: red;
    width: 400px;
    height: 40px;
}