CSS : I가 중간 수직 텍스트 정렬려고 중간

Question

세로 정렬 텍스트 (jsfiddle)

I는 높이 (인라인 블록 요소) 설정이 텍스트 만 스팬과 집중력

html로는 다음과 같습니다

<div class="parent"> 
    <span class="text">Bar</span> 
    <span class="bar"></span> 
    <span class="text">Foo</span> 
</div> 

는 CSS :

.bar { 
    display: inline-block; 
    height:100px; 
    width: 100px; 
    background-color: green; 
} 

텍스트를 부모 중간에 수직으로 정렬해야합니다. 나는 을 .text에 넣으려고했지만 어떤 이유로 값이 top과 bottom 인 것 같습니다. 어떤 제안?

Answer 1

이 함께 시도 :

.parent { 
    vertical-align: middle; 
} 
.bar { 
    display: inline-block; 
    height:100px; 
    width: 100px; 
    background-color: green; 
    vertical-align: middle; 
} 
.text { 
} 

이 같은

Demo

Answer 2

시도 :

.bar { 
    vertical-align: middle; 
} 

바이올린 here