html - 垂直对齐容器中的文本

Question

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

Here is the fiddle

.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，子元素的宽度会在父容器中拉伸(stretch)。 (我只需要垂直对齐子元素)

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

Answer 1

我很乐意使用 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 (line-height解决方案)

所以基本上我正在做的是摆脱按钮的自定义 padding 并使用 line-height 代替。如果您认为可以有多行，那么将两个部分都设置为 display: table-cell; 会更有意义。

---

正如您评论的那样，您有不同的font-size，这对我来说没有多大意义，因此解决方案是使用display: table-cell; 并稍微调整您的标记

Demo 2 (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;
}