Category labels are just a bit too high

When there’s nothing left for discourse to suggest in a category, it looks like the title of the Category needs to come down a few pixels.

(red line added by me for clarity)

Here in my hosted forum

and here on meta

It kinda is a PITA to fix. We’ve already spent countless man hours on this, but man, vertical centering in CSS is hard!


There are two different font sizes on the same line. The easiest solution would be to make them the same size.

PR please :question:


After a lot of messing around with this, the solution turns out to be very simple. The alignment problems are coming from trying to display block and inline-block elements inside of the h3 text. This works as custom css:

// Target the .badge-category text, the bullet icon needs to maintain `display: block`
#suggested-topics h3 .badge-wrapper.bullet span.badge-category, 
#suggested-topics h3 span,
#suggested-topics h3 span {
  display: inline;
#suggested-topics h3 .badge-wrapper.bullet span.badge-category, {
  // Override vertical-align: text-top from `badges.css.scss`
  vertical-align: baseline;

#suggested-topics h3 .badge-wrapper.bullet {
  // Top of bullet lines up with top of line - adjust line height to vertically align bullet.
  line-height: 0.8;

Edit - to take care of the case where a badge-wrapper.bullet has a parent category, the last rule needs to be changed to this:

#suggested-topics h3 .badge-wrapper.bullet,
#suggested-topics h3 .badge-wrapper.bullet span.badge-category-parent-bg,
#suggested-topics h3 .badge-wrapper.bullet span.badge-category-bg {
  line-height: 0.8;