It is necessary to place the text in the center of the block (text in one line). I decided to use line-height equal to the height of the block, but the height of the block besides the fact that it has a default value, is also dynamic. Tell me, how can I insert a block height into the line-height parameter? Perhaps there are some functions or mixins for sass for this?
Crantisz
8.579 2 eight 38
Constantine Shibaev Constantine Shibaev
362 one four 24
- The question, rather, should be called "How to position the text in the vertical center of the block?". Line-height has nothing to do with it. - labris
- @labris, a normal title from him. Different headers are needed. - Qwertiy ♦
- @labris There are a lot of ways to achieve this goal (padings, absolute positioning, etc.), but I chose this one for myself and put a clear question, so I see no point in your remark. - Constantine Shibaev
- Is it like "do you want to go or go?" Need a solution or need line-height? - labris
- @labris Want to think your opinion is correct? - consider, but why impose it on others. - Constantine Shibaev
|
2 answers
html, body { height: 100%; margin: 0; vertical-align: middle; } body::before { content: ""; display: inline-block; height: 100%; vertical-align: middle; } Just some text 
Qwertiy ♦ Qwertiy
76k 17 73 199
- This is the most correct way. :) The same question was discussed here - stackoverflow.com/questions/12686065/… ; different solutions - css-tricks.com/centering-in-the-unknown - labris
|
div{ height: 50px; border: 1px solid #ccc; display: flex; align-items: center; } div:nth-of-type(2){ height: 100px; } div:nth-of-type(3){ height: 150px; } <div>text-middle</div> <div>text-middle</div> <div>text-middle</div> 
soledar10 soledar10
22.4k five 21 51
- An interesting option. Although not sure about rationality :) - Qwertiy ♦
- Flex is nice, but if I used it, I would not have thought about this issue. - Constantine Shibaev
|