Badge "multiplier" a little bit misaligned on the profile page

Question

Well, you can see it for yourself. The badge multiplier is a bit misaligned. Can you fix this please? (I know it's kinda a minor issue but it's bugging me and it's somehow off)

If it helps, I'm using Chrome version 44.0.2403.125 m. (Also repro'ed on FireFox 39.0 and FireFox 24.0)

---

_{For no good reason, that's a screenie from Kevin Montrose's profile page.}

Answer 1

Upon doing the inspect element on Kevin Montrose's profile Badges count, I see the relevant HTML code as:

<li>
        <a href="/help/badges/37/populist?userid=130213" title="gold badge: Highest scoring answer that outscored an accepted answer with score of more than 10 by more than 2x" class="badge"><span class="badge1"></span>&nbsp;Populist</a>
            × <span class="earned-count">2</span>
        <span class="badge-date">aug 29 '12</span>
</li>

Whereas, when I compare that to Anna Lear's profile I see:

<li>
    <a href="/help/badges/59/support?userid=155160" title="gold badge: Earn at least 1000 total score for at least 200 non-community wiki answers in the support tag" class="badge-tag"><span class="badge1"></span>&nbsp;support</a>
    <span class="badge-date">apr 3 '13</span>
</li>

I do not see the × <span class="earned-count">n</span> element for the three of the currently listed badges under the Gold section. I also checked if it has something to do with "Populist" badge. Anna does have a Populist (x 2) badge on her profile. So, that's not the case here.

I did a check on few other top ranked users profile (Shog9, Oded, and few others) where the count was not shown for the badges. But then, I found Monica Cellio's profile where the badge count is displayed next to it. I can't tell what kinda algorithm is used here. It's a mystery for sure.

As for the mis-alignment goes, yes OP is correct. It can be fixed by adding vertical-align: middle; to the below CSS code.

.badges-content .rarest .badges-list .badge, .badges-content .rarest .badges-list .badge-tag {
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

-OR-

body.user-page #content * {
    box-sizing: border-box;
    vertical-align: middle;
}

There might be another better way to achieve this as CSS can do many wonders to a design. But that's what I can think as of now. Although adding vertical-align: middle; has solved the alignment issue but it might have other drawing implications somewhere else. I didn't experiment much. I would leave this to SE's UI/UX team for further experiment.

I am on MacBook Pro OS X Yosemite Ver. 10.10.4. I can reproduce this alignment error in my Chrome (Version 43.0.2357.134 (64-bit)) and Firefox (Version 39.0).

The below is the screenshot of Safari Version 8.0.7 (10600.7.12). This is a default view i.e. no changes made to the CSS code. The alignment works perfectly here.