HTML 中的垂直居中子脚本和超级脚本

Question

有没有办法同时垂直居中子脚本和上脚本？我希望“e”与“r”垂直居中。

<span><sup>e</sup><sub>r</sub>Team 1</span>

Answer 1

嗯，有，但你几乎必须去掉这些标签固有的所有默认样式。所以你不妨使用跨度。

你还需要一个包装器，以便你可以按照你想要的方式排列它们...我使用了 Flexbox，但我确信还有其他方法。

body {
  font-size: 36px;
  text-align: center;
}
span.column {
  flex-direction: column;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  vertical-align: text-top;
}
sup,
sub {
  top: 0;
  bottom: 0;
  line-height: 1;
  font-size: .5em;
}

<span>
  <span class="column"><sup>e</sup><sub>r</sub></span>
Team 1
</span>

Answer 2

如果您不介意 [sub][super] 脚本使用等宽字体，您可以执行以下操作：

span {
  font: 20px verdana;
}

sup, sub {
  font-family: monospace;       /* make letters same width so the transform aligns them properly */
}

sup + sub {
  display: inline-block;        /* transform doesn't work on inline elements */
  transform: translateX(-100%); /* move backwards */
}

<span><sup>e</sup><sub>r</sub>Team 1</span>

Answer 3

还有一种解决方案。 注意 仅当您的下标或上标中有 1 个字母时，此功能才有效。

span {
  font-size: 30px;
  position: relative;
  padding-left: 0.5em
}
sup,
sub {
  position: absolute;
  left: 0;
  line-height: 0.8;
  font-size: .6em;
}
sup {
  top: 0;
}
sub {
  bottom: 0;
}

<span><sup>e</sup><sub>r</sub>Team 1</span>

Answer 4

我在尝试解析科学主题的符号时遇到了此处提供的解决方案。我决定使用内联样式方法来避免与html的其他部分发生冲突，并修改了字体大小。下面工作正常。它垂直对齐sup和sub标签，中间没有空格

<span style="display: flex;">Ca<span style="display: flex; align-items: center; flex-direction: column; font-size: 0.75rem;"><sup>40</sup><sub>20</sub></span></span>

希望在我继续搜索的过程中，可能会有更好的帮助者