的 DEMO

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

有两个问题：

我希望两个span指标具有相同的高度。的高度带图标的那个比另一个像素多一个像素。
span带图标的图标未垂直对齐。

更新

我意识到如果我将font-size .k-font-icon更改为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;
  }

的 DEMO

Answer 2

如果您正在设置身高和.indicator的高度，有几种方法可以做到这一点，但最简单的方法可能是将显示更改为flex而不是{ {1}}并添加一些属性（我还没有添加供应商前缀，主要是因为我懒惰......）：

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; }类，其行为方式不同，具体取决于它所使用的HTML元素（如果是这样的话，您应该重构一下）您不应该在CSS规则的开头添加.indicator。它无缘无故地增加了特异性，使你的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;
 }

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

4 个答案:

的 DEMO