Alignment of text and icons in button

How do I ensure that the text and the icon in these buttons is centre aligned?

At the moment, the arrow seems to be a bit higher than the text.


Here is my site Read-Only: https://preview.webflow.com/preview/more-like-jesus?utm_medium=preview_link&utm_source=designer&utm_content=more-like-jesus&preview=52e058379b43f99960f45d71d1090658&pageId=5fced8ede1f6e678e2eab976&mode=preview

Hey Steve,

Using flexbox, ‘centre-align’ (on the parent element - ‘button 12’) will ensure the child elements ('Text Span, Text Span 2) are ‘centre aligned’.

However, you will also need to check any padding or margin are the same on the elements you want to align (otherwise, although aligned, they will still look uneven - due to the padding/margin difference)

In the case of your button 12 element, if you change to flexbox, you will need to enter a width value, otherwise, the button will expand to the width of its parent.

Your Text Span and Text Span elements do not have any padding/margin and the text line-height is the same, so you should be good to go.

Let me know if that achieves what you are after.
Keiran