如何垂直对齐跨度内的图标

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：

这是一个剑道用户界面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;
  }

DEMO

Answer 2

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

最简单的方法，希望对您有所帮助。

Answer 3

如果您要设置 .indicator 的高度和尺寸，有几种方法可以做到这一点，但最简单的方法可能是将显示更改为 flex 而不是 inline-box 并添加一对属性（我没有添加供应商前缀，主要是因为我很懒……）：

.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 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;
 }