Vertical Align centre in Safari Browser
Hi Friends, Help me about vertical centre for Safari .... i have created a flag/tag and the text inside that is perfectly centre vertically in other browser like mozilla but in safari i am having some extra space at bottom of text .. may line height issue... but i already reset it. please help to resolve it.. Here is code and result scrshot...
Thanks in Advance
13 Replies
Any Help??
It's probably the way each browser renders text. Probably not much you can do
Can you recreate the problem in a Code Pen and post it here? Can’t troubleshoot with just screen shots.
sure... ill try ...
yeah.. but this kind of isse i never seen in other website or application people do.. so definitely there is a way to resolve
I'm not sure the professional way to solve it but one way you could do is check what browser the user is on and then add a class that adds a slight margin top to the links if they're on Safari
yeah that another way... but i am sure there is a simplified way .. or may be only i am seeing this issue cause of any code glich..
Nah it's a pretty common issue
https://codepen.io/lemon-cs2016/pen/poQQdRz
here is the codepen link... but not sure in codepen it is looking fine...
So in CodePen it’s good in Safari?
yes.
yes... but when i am doing it in my code it is not... may be there is some other reset codepen has for making same result on all browser... so definitely there is something i am missing..
here is the scrshot from two diffrent broswer Left is Safari
I think it has to do with line height. I might be wrong though
yeah i tried but not working.. you can see in my code above..
Ok by some experiments and hits... i found the problem is with fonts... I am using Poppins fonts... other default fonts like Arial, Helvetica etc.. it is working fine... i need to study how to manager poppins fonts.. Thank you to all
Final Solution for Google fonts and Poppins .... Set Line-height to Zero.. and manage space by padding... working perfactly in all major browsers..