Невозможно выровнять внутреннийHTML диапазона по вертикали в Firefox

Question

У меня возникла проблема с получением внутреннего текста диапазонов по центру в Firefox

Вот скриншот devtools для 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;
        }
      }
}

В идеале текст должен располагаться по центру по вертикали внутри диапазона.

Это не дубликат, все предлагаемые ответы касаются выравнивания двухэлементы в родительском.Это относится к конкретной проблеме браузера с выравниванием содержимого innerHTML диапазона.

Answer 1

У тебя все хорошо. Метрики шрифта BrownStd вызывают эту проблему. Расстояние от базовой линии символа до нижней части области содержимого шрифта больше, чем расстояние до верхней части. Не уверен, что вы можете идеально выровнять текст и значок без некоторых хитростей, таких как отрицательные поля или абсолютное позиционирование . Вы можете прочитать эту статью о метриках шрифта , это довольно сложно понять.

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 с пользовательским шрифтом BrownStd.

Answer 2

Если под «внутренним содержанием пролета» вы ссылаетесь на ограничивающую рамку текста, я считаю, что единственный способ манипулировать этим в CSS - это line-height, и вы не можете изменить способ отображения текста.выровнен по его высоте строки.

В этом случае я бы попытался уменьшить высоту строки до точной высоты текста, и тогда align-items: center для родителя должно работать.