Button with icons odd alignment #2931
-
|
Hi, I'm not entirely sure if it is a Tailwindcss bug or browser rendering issue. When a set of buttons is used together with and without icons they don't get horizontally aligned well. Very odd. Firstly I was betting that with an icon inside the button gets higher than others in the line so would make sense. But they have exactly the same height. I made this quick example here so that is clear to see. The sample was from Tailwindui. https://jsfiddle.net/tiagomatosweb/pta3n4eu/ What am I missing? Cheers tks |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments
-
|
Looks like just a quirk of how CSS behaves with two inline elements next to each other that contain varying content. Your best bet is to use flexbox to have explicit control over how you want stuff like this to render horizontally, updated your example here: |
Beta Was this translation helpful? Give feedback.
-
|
Hi Adam, that I knew but the idea was to make those buttons aligned by themselves without having to wrap in a flex div. Tks anyway. |
Beta Was this translation helpful? Give feedback.
Looks like just a quirk of how CSS behaves with two inline elements next to each other that contain varying content.
Your best bet is to use flexbox to have explicit control over how you want stuff like this to render horizontally, updated your example here:
https://jsfiddle.net/okqr9amz/3/