Why isn't arrow centered?[solved] | SoloLearn: Learn to code for FREE!

+6

Why isn't arrow centered?[solved]

https://code.sololearn.com/WTvWwgSEVPh7/?ref=app

8/1/2020 6:44:17 PM

Abhay

23 Answers

New Answer

+5

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/

+8

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

+6

→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 😐

+5

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.

+5

I like those arrows too, but they are always annoying me, because even within normal office documents it's the same s*** with them.

+5

Sandra Meyer damn that's annoying! ,thanks for the help tho :-)

+5

remove line-height from div Set line-height 7vh for #one 12vh for #two.

+4

Anisha that increases width and height of element ,not what I want , basically the text is centered and arrow isn't ,why is that?

+4

Sandra Meyer it should be centered vertically as well just like text,and yes I ran it on Chrome on Android

+4

Just put another 'h' next to the arrow, there's nothing wrong with your alignment...

+3

Are you sure about that? For me it looks very centered... (Android + Chrome)

+3

See there: https://www.sololearn.com/post/482361/?ref=app

+3

But the arrow is a little bit lower than a normal text, isn't it?

+3

Yes

+3

Sandra Meyer yes it works perfect for text but not for arrow for some known reason that I am not aware of

+3

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

+3

Abhay it was a thought? You have me looking for other Ascii symbols that are not vertically centered now. There are a bunch... I took the red pill?! 😳🤣

+3

Kode Krasher um ,sorry ,thks a lot tho:-)

+3

Divya Mohan thank you very much for that article and a clear explanation

+2

Rahul Verma yup but I don't want that behaviour😅