# 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 年6 月 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:** 1\
**Showing post:** 5

<div class="post-metadata">

作者： ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)\
发布日期： [2015 年6 月 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;
}

```

---

_[View the full topic](https://meta.discourse.org/t/category-labels-are-just-a-bit-too-high/29951)._