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.
{F395345}
The logo text does not fill up the entire 44px of the site header, and so it 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. 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%);
```