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

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