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

【问题标题】：Vertically Center Sub and Super Script in HTML垂直居中 HTML 中的子脚本和超级脚本
【发布时间】：2016-05-03 12:39:43
【问题描述】：

有没有办法同时垂直居中子脚本和超级脚本？我想要“e”与“r”垂直居中。

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

【问题讨论】：

你想改变html结构吗？
如果需要的话，我可以。
这个jsfiddle.net/kxo6evfh怎么样
我不得不等待不同的答案，你的答案会有很大的变化。
上下标文字（如“e”、“r”）保持不变？或者您可以更改它并添加一些其他符号（例如“eeee”、“rrrr”）？

标签： html css subscript superscript

【解决方案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>

【讨论】：

哪些浏览器支持这个？
基本上是 IE10 及以上。

【解决方案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 */
}

&lt;span&gt;&lt;sup&gt;e&lt;/sup&gt;&lt;sub&gt;r&lt;/sub&gt;Team 1&lt;/span&gt;

【讨论】：

【解决方案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;
}

&lt;span&gt;&lt;sup&gt;e&lt;/sup&gt;&lt;sub&gt;r&lt;/sub&gt;Team 1&lt;/span&gt;

【讨论】：