-1

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>

enter image description here

j08691
  • 197,815
  • 30
  • 248
  • 265
ahdung
  • 322
  • 2
  • 11
  • [**Do not post images of code or errors!**](https://meta.stackoverflow.com/q/303812/995714) – Rob Jan 05 '18 at 02:29
  • @Rob I don't think so, image is a good thing – ahdung Jan 05 '18 at 03:36
  • Your "opinion" directly violates Stack Overflow policy as explained in the link I showed you and in the Help Center. Please don't argue with me about this. If you want to complain to Stack Overflow moderators, it's their rule, bring it up with them. – Rob Jan 05 '18 at 03:37
  • policy? I search in help center, can't find it. fine, if this really is a policy, I'll stand by it, and thank you warning. but if it isn't a policy just a suggestion, sorry I'll keep my point. – ahdung Jan 05 '18 at 04:07
  • You don't seem capable of reading the link I already posted so I'll wait for the moderator to handle it if your question doesn't get deleted altogether first for being a duplicate. – Rob Jan 05 '18 at 04:10
  • @Rob That link is just a question, isn't it? as for duplicate, my question is different if you carefully look it. about your waiting, good luck. – ahdung Jan 05 '18 at 04:44

1 Answers1

0

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.

Veritoanimus
  • 309
  • 2
  • 10