Span positioning on different browsers - html

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>

Answer 2

Your symbol 'x' is vertically aligned, but is docked to top of symbols line. It's such a symbol.
Try to use ×
This simbol with this style work for me
.ember-power-select-multiple-remove-btn {
vertical-align: middle;
}
Threre is a question about which symbol to use
Which font for CSS "x" close button?

Answer 3

I have just replaced the vertical-align: text-bottom; to vertical-align: middle; And I have check this in Windows7 Chrome,IE & FF and looks aligned to me. please check in MAC also.
.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: middle;
color: #fff;
opacity: 1!important;
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>
Hope this helps you.

Answer 4

Here is a solution that make use of display: inline-flex;
How does that look in Mac?
.ember-power-select-multiple-option {
padding: 0px 4px 1px;
margin: 2px;
-webkit-font-smoothing: antialiased;
border-radius: 10px;
border: none;
background-color: #FFB000;
display: inline-flex;
align-items: center;
height: 21px;
}
.ember-power-select-multiple-option .text {
display: inline-block;
font-size: 13px;
font-family: CenturyGothic;
border-radius: 10px;
border: none;
color: #fff!important;
height: 16px;
line-height: 14px;
}
.ember-power-select-multiple-remove-btn {
display: inline-block;
padding: 0;
color: #fff;
opacity: 1!important;
font-size: 14px;
font-family: sans-serif;
margin-right: 4px;
height: 16px;
line-height: 14px;
}
<span class="ember-power-select-multiple-option">
<span aria-label="remove element" class="ember-power-select-multiple-remove-btn">x</span>
<span class="text">самбука</span>
</span>

Answer 5

I solved my problem in unexpected way.
First of all, I have update addon to newest version, and structure was changed.
<li class="ember-power-select-multiple-option">
<span role="button" aria-label="remove element" class="ember-power-select-multiple-remove-btn">×</span>
самбука
</li>
Also I set:
vertical-align: middle;
font-family: verdana;
for ember-power-select-multiple-remove-btn class and it looks great. So I assumed that span in another span was not very good structure =).
Now it looks next on both OS.