How vertical align inner span with smaller text?

Question

Example: https://codepen.io/ahdung/pen/dJVZov

body {
  font-size: 2em;
}

.outer {
  background-color: darkgray;
}

.inner {
  background-color: red;
  font-size: 0.7em;
  vertical-align: middle;
  /*not useful*/
}

<span class="outer">
      <span class="inner">AAA</span>BBB
</span>

Answer 1

simplest solution. although you may want to tinker for exact placement since block with inline isn't always perfect.

.inner {
    display: inline-block;
    vertical-align: middle;
}

you could go more complex to get a better center doing something with:

.outer {
    display: inline-block;
    position: relative;
    padding-left: 2.5em;
}

.inner {
    display: block;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
}

depending on what's around it and what kind of text or variable text, you can do different things.