[wp-trac] [WordPress Trac] #47063: Text not vertically centered on site-health.php

[WordPress Trac]

#47063: Text not vertically centered on site-health.php
-------------------------------------------------+-------------------------
 Reporter:  Presskopp                            |       Owner:  (none)
     Type:  defect (bug)                         |      Status:  new
 Priority:  normal                               |   Milestone:  5.2.1
Component:  Administration                       |     Version:  5.2
 Severity:  normal                               |  Resolution:
 Keywords:  has-screenshots has-patch site-      |     Focuses:  ui
  health has-design-feedback                     |
-------------------------------------------------+-------------------------
Changes (by afercia):

 * keywords:  has-screenshots has-patch site-health has-needs-design-
     feedback => has-screenshots has-patch site-health has-design-feedback


Comment:

 I'm not sure WordPress should encourage the usage of arbitrary `rem` /
 `em` values when there's not a clear math behind the value used. Things
 like `padding-top: 0.1rem;` produce a computed value of `1.6` pixels. This
 is subject to browsers rounding and on a screen, a pixel can't be split
 anyways.

 The root cause of this issue is that the elements within the accordions
 have different heights. For example:
 - the text has a (line) height of 16 pixels (inherits `normal` from the
 browser's default for buttons)
 - the badges height is ~22 pixels: also in this case the padding values
 `0.1rem 0.5rem 0.15rem` produce computed values with decimals

 I'd second @kjellr flexbox would be a better option but it should take
 into account that in the responsive view the badges should be repositioned
 and aligned to the left.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/47063#comment:13>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform