内部跨度与较小文本的垂直对齐方式如何？

Question

示例：https://codepen.io/ahdung/pen/dJVZov

＆＃13;

＆＃13;

body {
  font-size: 2em;
}

.outer {
  background-color: darkgray;
}

.inner {
  background-color: red;
  font-size: 0.7em;
  vertical-align: middle;
  /*not useful*/
}

＆＃13;

<span class="outer">
      <span class="inner">AAA</span>BBB
</span>

＆＃13;

＆＃13;

＆＃13;

Answer 1

最简单的解决方案。虽然您可能想要修改确切的位置，因为带内联的块并不总是完美的。

onCharacteristicChanged()

你可以更复杂一点，让一个更好的中心做一些事情：

.inner {
    display: inline-block;
    vertical-align: middle;
}

取决于它周围的内容以及什么样的文本或变量文本，你可以做不同的事情。