스팬 수직 정렬을 float으로

Question

div 안에 3 개의 스팬을 세로로 정렬하는 데 문제가 있습니다. 달성하기 쉽지만 float를 사용할 때 세로 정렬이 작동하지 않습니다. 그 lightblue 바가 수직적으로 중앙에 위치되기를 바랍니다. 코드 :

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