Center align logo image in header

[bamadesigner]

Hi!

This is a minor tweak to the CSS for the header logo and image. It allows the image to be center-aligned vertically, and the image max height is set to the height of the container. This change allows users to set whatever height and width they want for the image, and it will auto-scale in the container.

Thanks!

[felixmosh]

Hi @bamadesigner thank you fo this PR. Can you share some images with the previous state and the new one?

[bamadesigner]

Of course!

Here is the previous state if I don't have a width or height set on the logo:

Here is the previous state if I set a width and height on the logo:

Here is the new state with the align-items: center set on the <a> element:

You could only add the align-items: center to the <a> element and that would fix the main vertical align issue.

But as a helpful bonus, you can also add width: auto and max-height: 100% to the <img> element, and it makes a better layout for any images that are set to be bigger than the space.

When I first added my image, I set the width and height as 100px because I had not yet determined that the header container was hard-set to 80px tall:

So adding the width: auto and max-height: 100% to the <img> element resolved that:

But, really, I can live without the width: auto and max-height: 100% and just set 50px for the width and height of my image, as long as I have the align-items: center on the <a> element:

[felixmosh]

Thank you @bamadesigner for the contribution 🙏🏼

[bamadesigner]

Thank you @felixmosh !