How to center icon vertically in btn class, in Basically Basic?


#1

I’m using Basically Basic. When I use the btn class with an icon, and I have a 2-line caption in it, I’d like the icon to center in the button, vertically. Right now it stays at the top.

In case it matters, I achieve the 2-line caption using <br/>.

I’m pretty sure this is fairly trivial, but I’m not smart enough to figure it out. Anyone know how to do this? Thanks!


#2

It’ll take you some work to center the icon. The way it’s designed now is text (and icons) inside of a <a class="btn"></a> display inline.

Because you’re breaking the text into two lines, and the icon is physically on the same line as the text, it’s not going to center vertically.

The icon is wrapped in <span "icon"></span> so you can target it. You’ll probably need to absolutely position it, but that might be tricky to center without knowing the height of the button. Maybe flexbox could help here instead, I dunno…


#3

OK then. Maybe it actually is harder than I thought it would be.

Thanks. I’ll either figure it out, or give up. Probably the latter. :smirk: