跨度與浮動垂直對齊

Question

我有一個問題，垂直對齊3跨度內的一個div。這很容易實現，但是當我使用浮動時，垂直對齊不起作用。我希望淺藍色的酒吧能夠垂直居中。代碼：

.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

您可以在<span>元素，而不是浮動使用與vertical-align: middle;一起display: inline-block;。這樣，他們彼此相鄰定位也是一樣，你可以應用垂直對齊方式：

.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>