Span positioning on different browsers

Question

I have next html element:

<span class="ember-power-select-multiple-option">
      <span aria-label="remove element" class="ember-power-select-multiple-remove-btn">×</span>
      самбука 
</span>

With these styles:

.ember-power-select-multiple-option {
    padding-left: 2px;
    padding-right: 5px;
    margin: 2px;
    font-size: 13px;
    font-family: CenturyGothic;
    height: 21px;
    -webkit-font-smoothing: antialiased;
    border-radius: 10px;
    border: none;
    color: #fff!important;
    line-height: 19px;
    background-color: #FFB000;
    padding: 0 4px;
    display: inline-block;
    float: left;
}

.ember-power-select-multiple-remove-btn {
    width: 15px;
    height: 15px;
    display: inline-block;
    line-height: 13px;
    padding: 0;
    text-align: center;
    vertical-align: text-bottom;
    color: #fff;
    opacity: 1!important;
    font-size: 15px;
    font-family: sans-serif;
}

I'm trying to achieve next: span with text and another span in it with "X" symbol. All it must be vertical aligned to middle. Now I have this at MacOS X Chrome (and it looks OK to me) and at Windows7 Chrome. How can I make they looks the same? And I sure exists a better way to centering span than I used.

UPDATE:

In addition, I cannot change html because it is a part of an addon.

Answer 1

You had repeated properties such as padding which will override the first one in the same class. Plus using bothinline-block and float:left will not do the effect desired on float so just use inline-block.

I've a made a few tweaks to your code:

Snippet

body {
  box-sizing: border-box;
}
.ember-power-select-multiple-option {
  margin:2px;
  font-size: 13px;
  font-family: CenturyGothic;
  height: 21px;
  -webkit-font-smoothing: antialiased;
  border-radius: 10px;
  border: none;
  color: #fff;
  line-height: 17px;
  background-color: #FFB000;
  padding: 0 4px;
  display: inline-block;
}
.ember-power-select-multiple-remove-btn {
  width: 15px;
  height: 15px;
  display: inline-block;
  line-height: 17px;
  padding: 0;
  vertical-align: middle;
  color: #fff;
  font-size: 15px;
  font-family: sans-serif;
}

<span class="ember-power-select-multiple-option">
      <span aria-label="remove element" class="ember-power-select-multiple-remove-btn">×</span>
самбука
</span>