аз имам div-1 което съдържа div-2 и заглавие вътре. Размерът на div-2 варира. Искам HEADING да бъде правилно между горната част на двете divs, както е показано на снимката, с различни размери div-2, Бих искал да го има в чист CSS или SCSS. Ценна съм div2 в div1 използвайки
top: 50%;
left: 50%
transform = translate (-50%, -50%)
но не мога да центрирам заглавието между двете "divs"
Не знам размера на div-2, Той продължава да се променя и искам заглавието да бъде в средата, за разлика от това където размерът на елементите е известен.
Отговори:
-2 за отговор № 1По-добре е да използвате flexbox за това, div1, което поставяте display: flex; flex-direction: column; align-items: center; justify-content: center;
Заглавието може да се позиционира абсолютно вътре в div2 (позиция: относителна), просто задайте най-висока стойност до -100px (пример).
РЕДАКТИРАНЕ: Ако обаче се нуждаете от заглавието, за да бъде точно в средата, трябва да използвате javascript, за да изчислите височините на тези елементи ... (div1 - div2) / 2 = горно пространство. Така че тогава най-голямото пространство - размер на шрифта / 2 е най-горната част на заглавието ... Надявай се да го получиш