23 AnswersNew Answer
23 AnswersNew Answer
I think is problem is due to different line concept for character and symbol. Line height set the baseline of typography.and all character sit on base line. In case of alphbates they must lie between baseline and shoulder line hence appear to be in center but as symbol need not to touch shoulder line and sit at base they appears little bit lower than alphabet In your case as font size is more it looking more lower. Go to this link to see the anatomy of typography https://www.reddit.com/r/coolguides/comments/ar1m49/know_your_type/
Close calculation for line-height would be calc(12vh * .5 + 17px); NOTE: That also isn't perfect because there's still some unnoticeable margins below the arrow icon but it's close. 12vh * .5 is the value for half the div's height. 17px is the default font-size for a HTML5 text
→hello; This is why the arrow was not centered vertically. It's by the design of arrow unicode, that it is displayed a bit lower 😐
It's the arrow itself the problem, but you would have to change the character to change that. Or move the alignment out from center to top.
I like those arrows too, but they are always annoying me, because even within normal office documents it's the same s*** with them.
Sandra Meyer damn that's annoying! ,thanks for the help tho :-)
remove line-height from div Set line-height 7vh for #one 12vh for #two.
Anisha that increases width and height of element ,not what I want , basically the text is centered and arrow isn't ,why is that?
Sandra Meyer it should be centered vertically as well just like text,and yes I ran it on Chrome on Android
Just put another 'h' next to the arrow, there's nothing wrong with your alignment...
Are you sure about that? For me it looks very centered... (Android + Chrome)
See there: https://www.sololearn.com/post/482361/?ref=app
But the arrow is a little bit lower than a normal text, isn't it?
Sandra Meyer yes it works perfect for text but not for arrow for some known reason that I am not aware of
Doesn't work Kode Krasher ,it's better to give it a different line-height and hide overflow text in case it covers another element
Kode Krasher um ,sorry ,thks a lot tho:-)
Divya Mohan thank you very much for that article and a clear explanation
Rahul Verma yup but I don't want that behaviour😅
Abhay if you want to align any element to the center no matter what type they there are, you should use box-sizing: border-box; and padding specifically padding-top: total height of the box minus size of the element inside the box divide by two px, vh or %; , This is your previous code i centered it👇👇https://code.sololearn.com/WgtFjFHP49qj/?ref=app
Sololearn Inc.535 Mission Street, Suite 1591
Send us a message