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

Question

有没有办法同时垂直居中子脚本和超级脚本？我希望＆＃34; e＆＃34;垂直居中于＆＃34; r＆＃34;。

<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]脚本的等宽字体，您可以执行以下操作：

＆＃13;

＆＃13;

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 */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>