Question

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

这是firefox devtools的屏幕截图，突出显示了span元素。

dev tools highlight

这在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;
        }
      }
}

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

这不是重复项，建议的答案都是针对对齐父级中两个元素的问题。这是指浏览器特定的问题，该问题与对齐范围的innerHTML内容对齐。

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字体。

Answer 2

如果通过“ span的innerHTML内容”是指文本的边界框，我相信在CSS中操作该文本的唯一方法是通过line-height，并且您不能更改文本在其行高范围内对齐。

在这种情况下，我会尝试将行高减小到文本的确切高度，然后在父级上使用align-items: center。

无法在Firefox中垂直对齐范围的innerHTML

2 个答案: