How does line-height works?[SOLVED] | SoloLearn: Learn to code for FREE!

+10

How does line-height works?[SOLVED]

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

7/31/2020 2:04:14 PM

Abhay

29 Answers

New Answer

+6

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/

+4

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

+3

The position of the text from the top🤔

+3

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

+3

Abhay I will have to look up some bookmarks, but there are a bunch of responsive code articles I have read lately. css-tricks.com has a few I know. The vertical alignment is tough because with block or inline code there is no reference without determining screen size first. Realtive and absolute positioning solve the problem with the div, but the text inside is a problem. The Code I implemented scale in portrait and landscape on an ipad, and it scales in multiple browsers, but it will break when placed in SL when making the same adjustments, but I think that is more due to the app using iframes? Just a hunch.

+2

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

+2

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).

+2

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

+2

Abhay checkout this article on typography using viewport: https://css-tricks.com/viewport-sized-typography/ I have at least one more, I just have to find it since I have been on a bookmark binge lately. lol

+1

Abhay yea... Haven't looked at flex or grid since I have been getting everything I need to work with just the viewport. If I was doing a columned newsletter or something like that I would traditionally use a table (I know), maybe flex or grid (which I need to learn). Using the viewport is more responsive than percentages from everything I read. The problem with any of the older recognized scaling methods (px, em, %) is that certain assumptions are made if ALL values are not set. When you use the viewport all values are scaled to available screen size unless explicitly set. That is the benefit of using it; Scales everything the same regardless of the devices resolution. Maximum consistency. 😉 Here are my modifications... I added the opposite arrow to "one" just for perspective. I moved some of the css around, but notice that line-height is not there. This works on iOS, Mac, Chromium on Raspberry Pi, and Android x86: https://code.sololearn.com/WeOsx7EpqBFK

+1

+1

Abhay here are a few more good links I have in my reading list that I am using for reference: https://www.seoptimer.com/blog/viewport/ good primer. https://css-tricks.com/fun-viewport-units/ this is the page that set me off on the venture trying to figure out my RPSLS game... ( The code probably is not that pretty, but if you haven't checked it out, it is totally responsive at any resolution: https://code.sololearn.com/WSl3pAQoM0lL ... sorry shameless plug?! I am really proud of how well it scales.) https://css-tricks.com/molten-leading-css/ I only add this, because I started to research line-height with this page, but gave up. https://whatismyviewport.com Lastly, this is a handy site, especially in the SL Web Environment.

0

Abhay I don't get want you mean

0

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

0

Set line-height:1;

0

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

0

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

0

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

0

Calviղ it doesn't center it inside a div

0

Abhay yes, it's center inside the div.