两个相邻的span元素：一个垂直居中对齐，另一个则不是。为什么？

Question

在下面的SSCCE中，我将CSS属性 vertical-align: middle; 应用于.innerContainer div。它有两个span：一个包含 ALPHA BRAVO CHARLIE 文本，另一个包含 SUBSCRIBE NOW 文本。 ＃firstSpan 似乎垂直居中对齐。＃secondSpan 不是。为什么？ 在这里查看JsFiddle 。 我想让＃secondSpan span也在垂直方向上对齐居中。我该怎么做？ 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;
}

截图：

（注：该截图无法翻译，仅为示例）

- Solace

Answer 1

属性vertical-align适用于元素本身而不是内容，尝试使用。

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

更新后的演示文稿

如果你的浏览器窗口不够宽，无法显示对齐的文本，这里有同样的演示但省略了一些文本。

- DaniP

Answer 2

DEMO

可以翻译成中文为：

{{链接1：演示}}

。

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

垂直对齐可以让它按照您的意愿对齐，而内联块可以防止断开，立即订阅。

- himanshu