Search code examples
htmlcsssubscriptsuperscript

Vertically Center Sub and Super Script in HTML

Is there a way to vertically center a sub and super script at the same time? I would like the "e" vertically centered with the "r".

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

enter image description here

Solution

  • Well, there is but you pretty much have to strip away all the default stylings that are inherent to these tags. So you might as well use spans.

    You'll also need a wrapper so that you can arrange them how you want...I've used flexbox but I'm sure there are other methods.

    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>