How to vertically align an icon inside a span

Question

I have a span like this:

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

Inside this span sometimes I have numbers like this:

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

And, sometimes some Kendo-UI icons, like this:

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

And, here is my 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;
}

There are two problems:

1. I want the two span indicators to have the same heights. The height of the one with icon is one pixel more than the other one.
2. The icon in the span with icon is not vertically aligned.

UPDATE:

I realized if I change the font-size of .k-font-icon to 1em , both issues will be resolved, but the icon will be too small.

UPDATE 2:

Here's a Kendo UI Dojo .

Answer 1

Try using line-height and 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

if you're setting the height and with of your .indicator , there are a few ways you could do this, but the easiest is probably to change the display to flex instead of inline-box and add a couple of properties (I haven't added the vendor prefixes, mostly because I'm lazy…):

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

Unrelated side note: unless you have an .indicator class that behaves different ways depending on what HTML element it's on (and if that's the case, you should probably refactor that) you shouldn't add a span at the beginning of you CSS rule. It increases the specificity for no reason and makes your CSS less flexible/future proof.

Answer 3

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

Simplest way, hope this help.

Answer 4

Updated

what about this?

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