Why isn't arrow centered?[solved]

Question

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

Answer 1

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/

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

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

Answer 9

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

Answer 10

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

Answer 11

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

Answer 12

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

Answer 13

Yes

Answer 14

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

Answer 15

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

Answer 16

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

Answer 17

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

Answer 18

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

Answer 19

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

Answer 20

i even had trouble with that thanks