垂直对齐容器中的文本

我正在尝试对齐与浮动元素相邻的跨度元素。

这是小提琴 http://jsfiddle.net/w7vngc43/2/

.heading {
  background-color: tomato;
}
.heading::after {
  content: "";
  display: block;
  clear: both;
}
.heading > * {
  display: inline-block;
  vertical-align: middle;
  color: beige;
  padding: 10px;
  font-family: Calibri;
}
.button {
  float: right;
  background-color: firebrick;
  font-family: Tahoma;
}

<div class="heading"> <span> some icon here</span>
  <!--
 --><span>some text here</span>

  <div class="button">Go</div>
</div>

我可以更改 HTML。

一些注意事项：（看到下面的答案后添加)

• 每个子元素的字体大小和高度都不同。
• 如果我使用display: table-cell，子元素宽度在父容器中拉伸。 （我需要垂直对齐子元素)

PS：我不是在寻找display: flex解决方案。

我很乐意和display: table-cell;解决方案，但如果它只是一行，那么您可以使用line-height这里。 （只是不要使过程复杂化，使用display: table-cell;因为有某些限制，例如您不能使用margin和东西）

.heading {
    background-color: tomato;
    line-height: 40px;
}    

.button {
    float: right;
    padding: 0 10px;
    background-color: firebrick;
}

Demo http://jsfiddle.net/w7vngc43/12/ (line-height解决方案）

所以基本上我所做的就是摆脱你的习惯padding对于按钮并使用line-height反而。如果您认为可以有多于一行，那么将这两个部分都设置为display: table-cell;会更有意义。

正如您评论的一个案例，您有不同的看法font-size这对我来说没有多大意义，所以解决方案是使用display: table-cell;并稍微调整你的标记

Demo 2 http://jsfiddle.net/w7vngc43/19/ (display: table-cell;解决方案）

<div class="heading"> 
    <div>
        <span> some icon here</span>
        <span>some text here</span>
    </div>
    <div>
        <div class="button">Go</div>
    </div>
</div>

.heading {
    background-color: tomato;
    line-height: 40px;
}

.heading > div {
    display: table-cell;
    vertical-align: middle;
}

.heading > div:first-child {
    width: 100%;
}

.heading span {
    display: inline-block;
    vertical-align: top;
}

.heading span:first-child {
    font-size: 30px;
}

.button {
    padding: 0 10px;
    background-color: firebrick;
}