Make logos and wordmarks centerable

[craigcook]

The wordmark component has a fixed width, which is good because it helps maintain consistency across all the different sizes (and an explicit width is also required for image replacement). However, not all wordmark images are the full width of the component. A background-position rule explicitly sets the image to one side or the other, which is correct when the wordmark is aligned with text. But there isn't currently a way to center a wordmark without overriding its base styling.

It would be nice to have a way to center wordmarks consistently so we don't have to do a custom override each time.

As much as it makes me cringe, it might call for a presentational utility class like mzp-u-centered. Unless we can define some specific rules about when and where a wordmark can be centered so we base it on some more meaningful context, a utility class seems like the simplest option.

[craigcook]

Seems like there are a few ways we could do this...

If we go with a utility class, it could look like this:

.mzp-c-wordmark.mzp-u-centered {
    background-position: top center;
    margin-left: auto;
    margin-right: auto;
}

Logos are all square so they're easier to center and don't need an override of background-position, but they do still need left and right margins set to auto.

Another option is to rework the component so it can inherit text-align: center; from a parent. That could avoid a presentational class but adds some other complications. Logos and wordmarks are currently set to display: block; which means the parent's text-align has no effect. We could change to inline-block but the fixed width still requires changing the background-position so we gain nothing. We can't just let the width collapse because we need to ensure enough width to keep the replaced background visible. We could set an explicit width for each product at each size so they're exactly as wide as the image (thus no need for background-position), but that's a lot of redundancy.

[craigcook]

Another wrinkle: The use case for centering a logo/wordmark is often just for mobile. We often want content centered in small windows but left/right aligned in bigger windows. A class would take effect for all breakpoints unless we get really specific like mzp-l-center-on-sm-md (there's precedent for this).