相同的CSS选择产生不同的结果

Question

相同的CSS选择会产生不同的结果。我在这里想念什么？

html：

<div class="cDiv">
  <img src="http://placekitten.com/100/100">
  <span class="cText"> Hello world </span>
</div>

css：

.cText {
  vertical-align: middle;
}

.cDiv > * {
   vertical-align: middle;
}

Here是jsFiddle。

将vertical-align: middle;应用到.cDiv > *选择文本后，文本将按预期移动到中间。

将vertical-align: middle;应用到.cText选择文本后，没有按预期移到中间。

两个选择都包括包含文本的span，但是只有一个选择会影响它。我不期望这样的行为。有人可以解释一下吗？

我希望按班级进行选择也能影响文本对齐方式。