Update outbound link icon alignment

[gtsiolis]

Summary

This will update outbound link icon alignment.

What kind of change does this PR introduce? (check at least one)

• Bugfix
• Feature
• Code style update
• Refactor
• Docs
• Build-related changes
• Other, please describe:

If changing the UI of default theme, please provide the before/after screenshot:

Before (header)	After (header)

Before (paragraph)	After (paragraph)

Does this PR introduce a breaking change? (check one)

• Yes
• No

The PR fulfills these requirements:

• When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)

You have tested in the following browsers: (Providing a detailed version will be better.)

• Chrome
• Firefox
• Safari
• Edge
• IE

[gtsiolis]

@ulivz could you review or forward this?

[ulivz]

You would need some hacks to achieve horizontal centering of inline-block and inline elements in the line, you would need all other inline elements to be set vertical-align which is not very elegant in VuePress, and your fix here is not really centered.

This is my fix:

• Code change:

-    vertical-align: text-bottom;
+   vertical-align: middle;
+   position: relative;
+   top: -1px;
}

• Snapshot

It's also centered when you change the font-size:

Isn't better?

[gtsiolis]

Thanks @ulivz! The goal was not to vertically align the icon but actually use text-bottom alignment in the first place. I think that both approaches are acceptable but let me know if you think this should vertically align the icon in the middle instead.

[shigma]

It's also centered when you change the font-size:

I think outbound link will look better if keeping the same size as fonts.

[ulivz]

@shigma Yup but we can do it in another PR, since there are two things.

[shigma]

@shigma Yup but we can do it in another PR, since there are two things.

I bet you are right.

[gtsiolis]

@ulivz I tried this out with a couple of different font sizes and the suggestion in #1308 (review) looks much better for larger fonts within Vuepress. I've updated the code and the screenshots in the description. Let me know what you think.

[ulivz]

Cannot wait to merge it!

[gtsiolis]

Thanks @ulivz! 😆