Question

我有下一个html元素：

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

使用这些样式：

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

我正在尝试实现下一个：带有文本的span和带有“X”符号的另一个跨度。它必须垂直对齐到中间。现在我在MacOS X Chrome上有（对我来说看起来不错），在Windows7 Chrome上有。我怎样才能让它们看起来一样？而且我确实存在一种比我使用的更好的中心跨度的方法。

更新：

另外，我无法更改html，因为它是插件的一部分。

Answer 1

您的符号'x'垂直对齐，但停靠在符号行的顶部。这是一个象征。

尝试使用× 这种风格的simbol适合我

.ember-power-select-multiple-remove-btn {
  vertical-align: middle; 
}

Threre是一个关于使用哪个符号的问题 Which font for CSS "x" close button?

Answer 2

您有重复的属性，例如padding，它将覆盖同一类中的第一个属性。另外，同时使用inline-block和float:left无法在float上执行所需的效果，因此请使用inline-block。

我对您的代码进行了一些调整：

段

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

我刚刚更换了vertical-align：text-bottom;垂直对齐：中间;我在Windows7 Chrome，IE＆amp; amp; FF和外观与我对齐。请检查MAC。

＆＃13;

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

＆＃13;

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

＆＃13;

希望这会对你有所帮助。

Answer 4

这是一个使用display: inline-flex;

的解决方案

在Mac上看起来如何？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

我以意想不到的方式解决了我的问题。首先，我有更新插件到最新版本，并且结构已更改。

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

我也设置了：

vertical-align: middle;
font-family: verdana;

for ember-power-select-multiple-remove-btn class，它看起来很棒。所以我假设另一个span中的span不是很好的结构=）。

现在它在两个操作系统上都显示下一个。

跨越不同浏览器的定位

5 个答案:

段