인접한 두 개의 스팬 : 하나는 수직 가운데 정렬이고 다른 하나는 가로 정렬되지 않습니다. 왜?

Question

다음 SSCCE에서 .innerContainer div에 CSS 속성 vertical-align:middle;을 적용했습니다. 두 개의 범위가 있으며 하나는 ALPHA BRAVO CHARLIE 텍스트를 포함하고 다른 하나는 SUBSCRIBE NOW 텍스트를 포함합니다.

#firstSpan은 중간에 세로로 정렬 된 것처럼 보입니다. #secondSpan은 그렇지 않습니다. 왜? JsFiddle here.

은 내가 #secondSpan 범위가 수직으로 중앙에 정렬되어야합니다. 어떻게해야합니까?

HTML :

<div class="container"> 
    <div class="innerContainer"> 
    <span class="firstSpan">Alpha Bravo Charlie</span> 
    <span class="secondSpan">Subscribe now</span> 
    </div> 
</div> 

CSS :

.container { 
    margin-bottom:0px; 
    padding: 0 10px 0 10px; 
} 
.innerContainer { 
    background-color: rgb(74, 72, 72); 
    padding: 30px 10px 30px 10px; 
    text-align: center; 
    /* vertical-align: middle; */ 
} 
.firstSpan { 
    font-family: Oxygen, sans-serif ; 
    text-transform: uppercase; 
    font-weight: bold; 
    font-size: 32px; 
    color: white; 
    letter-spacing: 2px; 
} 
.secondSpan { 
    margin: 0 40px 0 40px; 
    padding: 15px; 
    background-color:green; 
    text-transform:uppercase; 
    font-weight: bolder; 
    font-size: 12px; 
    letter-spacing: 1px; 
} 

스크린 샷 :

Answer 1

구독처럼 정렬 할

.innerContainer > span { 
    vertical-align:middle; 
} 

UpdatedDemo

브라우저 창이 정렬 된 텍스트를 표시 할만큼 충분히 넓지 않은 경우 여기에 the same demo with some of the text taken out입니다.

Answer 2

DEMO

.innerContainer span{ vertical-align: middle; 
    display:inline-block; } 

수직 정렬은 당신이 시도하려는 인라인 블록 깨는 방지 속성은 요소 자체가 아니라 콘텐츠에 적용 vertical-align 지금