How does line-height works?[SOLVED]

Question

I used it to center arrow but now by clicking on first div ,click event is triggered even tho it is set for second div,how can I avoid it and center the arrow?

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

Answer 1

I believe you should write display: inline-table to make the div display as a table, then it allows you to align it vertically.

I'm still noob tho, that's just something I read somewhere recently.

Edit: here is the source: https://www.sololearn.com/learn/CSS/1091/

Answer 2

Kode Krasher you are right about that viewport thing ,I changed height to 50% and it didn't scaled at all since body has no default height size and takes the content size so surely vh is a better option.

That arrow definitely looks good but again if you increase the size of it and make it 3em ,the same problem arises ,so adjusting line-height is still a better option considering there is a lot of blank space around that arrow one can't see and it overflows the block size(if it's too small) just like the normal text will and center align won't work

Answer 3

The position of the text from the top🤔

Answer 4

Abhay Here the code
https://code.sololearn.com/WBU9iPiA4XbF/?ref=app

Answer 5

Kode Krasher Android ,it's in the center of red div ,possibly it has something do with default font-size ,my is 16px,and my arrow size is 48px

Answer 6

Kode Krasher I know ,for me it was quite frustrating as well until I went through some articles ,if you set display:flex to parent element and set margin:auto to child it centers it ,for text , text-align :center and line-height about the height of container works well for centering text and I haven't looked into viewport stuff at all , positioning isn't a good idea if you wanna make a responsive website ,tho it can be controlled using values in %(I believe so).

Answer 7

Line height decides the height of an inline element .
Can be used for vertical aligning.

But mainly used for text

Answer 8

Use SVG

Answer 9

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

Answer 10

Abhay I don't get want you mean

Answer 11

Calviղ if you click on first element ,hello is logged out but I have attached event handler to second element only ,remove that line-height property and clicking on first div won't log out hello

Answer 12

Set
line-height:1;

Answer 13

Calviղ that is the problem i want to center the arrow inside div two and line-height was the only option I could find but it creates a problem as I mentioned before

Answer 14

Set line height to 1 would make it align to center (vertically)

Answer 15

text-align: center; would align it center (horizontally)

Answer 16

Calviղ it doesn't center it inside a div

Answer 17

Abhay yes, it's center inside the div.

Answer 18

Calviղ can you rewrite the code and paste it in here please? I don't understand how it's inside the div ,because it's appearing outside

Answer 19

Calviղ I want the arrow to be inside div in that blue box 🙄

Answer 20

Abhay yes, it's inside and right at the center of the blue box.