Пространства вертикального выравнивания с поплавком

Question

У меня проблема с вертикальным выравниванием 3 пролетов внутри div. Это легко достичь, но вертикальное выравнивание не работает, когда я использую float. Я хочу, чтобы светящийся брусок был вертикально центрирован. Код:

.container { 
 
} 
 
.text-1 { 
 
    float: left; 
 
    padding-right: 10px; 
 
} 
 
.bar { 
 
    background-color: lightblue; 
 
    border-radius: 5px; 
 
    float: left; 
 
    height: 5px; 
 
    width: 150px; 
 
} 
 
.text-2 { 
 
    padding-left: 10px; 
 
}

<div class="container"> 
 
    <span class="text-1">Text 1</span> 
 
    <span class="bar">&nbsp;</span> 
 
    <span class="text-2">Text 2</span> 
 
</div>

Большое спасибо за вашу помощь.

JSFiddle

Answer 1

Вы можете использовать display: inline-block; вместе с vertical-align: middle; на ваших <span> элементов вместо поплавка. Таким образом, они расположены рядом друг с другом и вы тоже можете применить выравнивание по вертикали:

.container span { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
.text-1 { 
 
    padding-right: 10px; 
 
} 
 
.bar { 
 
    background-color: lightblue; 
 
    border-radius: 5px; 
 
    height: 5px; 
 
    width: 150px; 
 
} 
 
.text-2 { 
 
    padding-left: 10px; 
 
}

<div class="container"> 
 
    <span class="text-1">Text 1</span> 
 
    <span class="bar">&nbsp;</span> 
 
    <span class="text-2">Text 2</span> 
 
</div>