The main site header has a logo image and text, but they are not vertically aligned.

1. The site header is 44px tall.
2. The image is 40px tall and has 2px margin vertically on each side, occupying 44px in total.
3. The text is roughly 21.6px (18px font-size with default line-height of 1.2 on desktop browsers) and has 9px margin on each side, 4.4px shorter than the logo.

The logo text does not fill up the entire 44px of the site header, and so is not vertically aligned.

I can think of 3 ways to fix this:

1. Use a fixed line-height and adjust margin accordingly.

.phabricator-wordmark {
  line-height: 22px;
  margin: 11px 4px 11px 6px;
  ...
}

2. Make the site header a flexbox and center its items. This will break existing layout of other items, which will need to be updated as well.

All modern browsers support flexbox. We may have users stuck on older browsers, but display: flex; is used in other CSS files twice already.

display: flex;
height: 44px;
align-items: center;

3. Use relative position to center text on Y-axis. This is unnecessarily complex, but was quite common before flexbox appeared.

position: relative;
top: 50%;
transform: translateY(-50%);