# Category labels are just a bit too high

**URL:** <https://meta.discourse.org/t/category-labels-are-just-a-bit-too-high/29951>\
**Category:** UX\
**Created:** [2015年六月13日 01:09 UTC](https://meta.discourse.org/t/category-labels-are-just-a-bit-too-high/29951 "2015-06-13T01:09:23Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![watchmanmonitor](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/watchmanmonitor/32/430970_2.png) [@watchmanmonitor](https://meta.discourse.org/u/watchmanmonitor)\
**Post date:** [2015年六月13日 01:09 UTC](https://meta.discourse.org/t/category-labels-are-just-a-bit-too-high/29951/1 "2015-06-13T01:09:23Z")

</div>

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  
 ![](https://global.discourse-cdn.com/meta/original/3X/2/d/2d4a8ddcead45548f9dd705049d2c61322e17b84.png)

and here on meta  
 ![](https://global.discourse-cdn.com/meta/original/3X/e/d/ed33222408aad56dc21af09e5a7db519262d7115.png)

---

<div class="post-metadata">

**Author:** ![zogstrip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zogstrip/32/512781_2.png) [@zogstrip](https://meta.discourse.org/u/zogstrip)\
**Post date:** [2015年六月13日 06:39 UTC](https://meta.discourse.org/t/category-labels-are-just-a-bit-too-high/29951/2 "2015-06-13T06:39:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)\
**Post date:** [2015年六月13日 09:27 UTC](https://meta.discourse.org/t/category-labels-are-just-a-bit-too-high/29951/3 "2015-06-13T09:27:27Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)\
**Post date:** [2015年六月14日 00:27 UTC](https://meta.discourse.org/t/category-labels-are-just-a-bit-too-high/29951/4 "2015-06-14T00:27:58Z")

</div>

PR please ❓

---

<div class="post-metadata">

**Author:** ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)\
**Post date:** [2015年六月15日 20:33 UTC](https://meta.discourse.org/t/category-labels-are-just-a-bit-too-high/29951/5 "2015-06-15T20:33:41Z")

</div>

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:

```plaintext
// 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 .badge-wrapper.box span,
#suggested-topics h3 .badge-wrapper.bar 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:

```plaintext
#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;
}

```