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.

score 2 · Answer 1 · edited May 23 '17 at 12:01

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?

edited May 23 '17 at 12:01

Community

1
1

answered Feb 13 '16 at 15:52

Ivan

312
1
4
14

Thanks. It looks like your × that I used already. But I will try symbols from link. – Crabar Feb 13 '16 at 16:18
I just realized that I cannot change this symbol cause it part of an addon. So I can just change css not html. – Crabar Feb 13 '16 at 16:27

score 2 · Answer 2 · answered Feb 13 '16 at 15:55

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>

score 2 · Answer 3 · answered Feb 13 '16 at 16:05

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.

Thx. At Mac it goes lower for some reasons. – Crabar Feb 13 '16 at 16:15 — Crabar, Feb 13 '16 at 16:15

Asons · Answer 4 · 2016-02-14T09:02:43.907

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>

Nope, symbol changed, but still lower. Anyway, as I mentioned in comments, I cannot change html cause it is a part of an addon. — Crabar, Feb 14 '16 at 09:52

score 0 · Accepted Answer · answered Feb 14 '16 at 12:25

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.

Span positioning on different browsers

5 Answers5

Snippet