具有Chrome中的表格单元格显示属性的元素中的垂直对齐文本

Question

我很难在使用display: table-cell样式的元素中对齐某些文本。它只是一个标签，我希望它支持多行文字。为了使vertical-align: middle;正确，我们需要将其显示为表格单元格，这很好，但不是在这里。

首次加载时，它在chrome中看起来像这样。正如你所看到的那样，它根本不在中间。

非常奇怪的是，如果您打开开发工具并将line-height从1更改为2然后又回到1它看起来很好，就像这样：

现在，如果我将line-height更改为0，然后又回到1，则会显示如下：

如何让它在页面加载时看起来很好？这是一个已知的问题？ 它在Firefox中看起来很好，它似乎只是chrome问题。

下面是标签的CSS：

.tab-controller__item {
  display: inline-table;
  border-radius: 6px 6px 0 0;
  margin-right: 6px;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  background-color: #717171;
}
.tab-controller__item__link {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  padding: 0 2em;
  display: table-cell;
  line-height: 1;
  height: 48px;
  vertical-align: middle;
  position: relative;
}

并且HTML非常基本：

<a class="tab-controller__item__link" href="#">
    <span class="icon-star"></span>Kampange<br>&amp; Bonus
</a>

Answer 1

使用display: table-cell时，必须拥有包含display: table或display: inline-table的父容器。

在这种情况下，它将是inline-table，因为您的标签位于水平布局中。

.tab {
    background-color: #F8AF46;
    display: inline-table;
}

演示：http://jsfiddle.net/Paf_Sebastien/t5pnLe33/