如何垂直對齊跨度內的圖標

Question

我有這樣的span ：

<span class="indicator"></span>

在這個span有時我有這樣的數字：

<span class="indicator">
    <span>10</span>
</span>

而且，有時會出現一些 Kendo-UI 圖標，如下所示：

<span class="indicator">
    <span class="k-font-icon k-i-checkmark"></span>
</span>

而且，這是我的 css：

span.indicator {
    position: relative;
    border: 1px solid #8a8a8a;
    background: #8a8a8a;
    color: #ffffff;
    font-size: 0.85em;
    font-family: helvetica;
    padding: 2px;
    margin: 2px;
    width: 30px;
    overflow: visible;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    border-radius: 4px;
}

.k-font-icon {
    font-family: KendoUIGlyphs;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    font-size: 1.3em;
    line-height: 1;
    opacity: 1;
    text-indent: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-image: none;
    font-size: 16px;
}

有兩個問題：

1. 我希望兩個span指示器具有相同的高度。 帶有圖標的高度比另一個高一個像素。
2. 帶有圖標的span中的圖標未垂直對齊。

更新：

我意識到如果我將.k-font-icon的font-size更改為1em ，兩個問題都會解決，但圖標會太小。

更新 2：

這是一個 Kendo UI Dojo 。

Answer 1

嘗試使用line-height和vertical-align css：

  span.indicator {
      position: relative;
      border: 1px solid #8a8a8a;
      background: #8a8a8a;
      color: #ffffff;
      font-size: .85em;
      font-weight: 400;
      font-family: helvetica;
      padding: 2px;
      margin: 2px;
      width: 30px;
      height: 20px;
      line-height: 20px;
      vertical-align: middle;
      overflow: visible;
      text-decoration: none;
      text-align: center;
      display: inline-block;
      border-radius: 4px;
  }
  span.indicator .k-font-icon {
    line-height: 20px !important;
  }

演示

Answer 2

如果您要設置.indicator的高度和 with ，有幾種方法可以做到這一點，但最簡單的方法可能是將顯示更改為flex而不是inline-box並添加幾個屬性（我沒有t 添加了供應商前綴，主要是因為我很懶……）：

.indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #8a8a8a;
    background: #8a8a8a;
    color: #ffffff;
    font-size: .85em;
    font-weight: 400;
    font-family: helvetica;
    padding: 2px;
    margin: 2px;
    width: 30px;
    height: 20px;
    border-radius: 4px;
}

不相關的旁注：除非你有一個.indicator類根據它所在的 HTML 元素表現出不同的方式（如果是這種情況，你可能應該重構它）你不應該在你的 CSS 規則的開頭添加一個span 。 它無緣無故地增加了特異性，並使您的 CSS 不那么靈活/面向未來。

Answer 3

.k-font-icon {
    vertical-align: middle;
}

最簡單的方法，希望這有幫助。

Answer 4

更新

這個怎么樣？

span.indicator {
   background: #8a8a8a;
   color: #ffffff;
   font-size: 1.35em;
   font-family: helvetica;
   padding: 2px;
   margin: 2px;
   width: 30px;
   overflow: visible;
   text-decoration: none;
   text-align: center;
   display: inline-block;
   border-radius: 4px;
}

.k-font-icon {
    font-family: KendoUIGlyphs;
    font-style: normal;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
 }