Vertical alignment

Help » On the web » Vertical alignment

There are a couple of easy methods to vertically center an icon.

With either method you’ll first target the icon or icons. If you’re using the ss-icon class to transform a word or a Unicode value, you can select it with .ss-icon (Protip: Without being more specific this will select all icons with the ss-icon class!). If you’re using an icon to augment a word, such as the star icon before the word “Favorites”, you’ll select the icon’s class, ss-star, and its :before pseudo element. So your selector would look like .ss-star:before.

Read more about using Symbolset on the web.

Hands off

The set-it-and-forget-it approach is to give the selected icon(s) the property and value of vertical-align: middle; This method should give you good results and scales with the font size.

Hands on

If you want control over how far the icon drops down you’ll want to select the icon and then give the it these two properties and values. The first is position: relative; and then you’ll shift it X amount of pixels with top: Xpx;.

That’s it! Centering an icon improves typographic rhythm and helps the icon feel more harmonious with the accompanying text.

Powered by Siteleaf