css - 无法在 Firefox 中垂直对齐跨度的innerHTML

Question

我在 Firefox 上使跨度的内部文本垂直居中时遇到问题

这是 Firefox 开发工具的屏幕截图，突出显示了 span 元素。

这在 Chrome 和 Safari 上按预期工作。

            <button
              style={{ marginTop: this.state.marginTop }}
              className={`info-tab-title`}
            >
              <img
                className="tab-icon"
                src="/images/neighborhood/train.svg"
                alt="train icon"
              />
              <span>TO BROOKLYN</span>
            </button>

    .info-tab {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      box-sizing: border-box;
      background-color: #e5e8ea;
      padding: 2% 4% 4% 4%;
      margin-bottom: 8px;
      cursor: pointer;
      height: 100%;
      max-height: calc(16.67% - 6px);
      transition: 0.25s max-height ease-in-out;
      &:last-child {
        margin-bottom: 0;
      }
      .info-tab-title {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        font-family: 'BrownStd Regular';
        font-size: 16px;
        font-weight: bold;
        letter-spacing: 0.35px;
        line-height: 16px;
        min-height: 26px !important;
        align-items: center;
        @media #{$mobile-break} {
          font-size: 14px;
        }
        .tab-icon {
          margin-right: 2.5%;
          height: 100%;
          width: auto;
        }
      }
}

理想情况下，文本应在跨度内垂直居中。

这不是重复的，建议的答案都是解决对齐父元素中的两个元素的问题。这是指对齐跨度的 insideHTML 内容时出现的特定于浏览器的问题。

Answer 1

你做得很好。 BrownStd 的字体规范会导致此问题。从符号基线到字体内容区域底部的距离大于到顶部的距离。 不确定是否可以在没有负边距或绝对定位等技巧的情况下完美对齐文本和图标。 您可以阅读此article about font metrics ，很难理解。

button {
  display: inline-flex;
  align-items: center;
  
  padding: 10px;
  height: 50px;
  border: 1px solid;
}

div {
  margin-right: 10px;
  width: 25px;
  height: 25px;
  background-color: red;
  border-radius: 50%;
}

span {
  background-color: blue;
  font-family: sans-serif;
  color: white;
}

<h1>Nice font —</h1>

<button>

  <div></div>
  <span>nice vertical alignment</span>

</button>

Codepen demo使用自定义 BrownStd 字体。