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

在 HTML 中垂直居中下标和上标

Vertically Center Sub and Super Script in HTML

html

css

superscript

subscript