Здраствуйте, в процесе выравнивания столкнулся с необходимостю расположить div сразу-снизу-после другого div-а-расположеного-по-центру-вертикально.
Вот пример кода как ето работает:
<body>
<div class="wrapper">
<div class ="Rectangle"></div>
<div class="But">Выйти</div>
</div>
</body>
<style>
body{
margin: 0;
overflow: hidden;
}
.wrapper{
display: table-cell;
vertical-align: middle;
width: 100vw;
height: 100vh;
}
.Rectangle{
width: 100vw;
height: 20vh;
background: green;
}
.But{
position: absolute;
width: 100vw;
text-align: center;
font-size: 10vmin;
}
</style>
Тоесть .Rectangle выровнян по центру вертикально, теперь сразу за ним стоит .But, который никак не выравнивается (он просто идет после предыдущего блока)
Все ето идеально работает пока в клас-обертку не прописать display:flex, display:grid, dispaly:none. Как можно такой метод выравнивания заставить работать даже если клас обертка имеет строчку display:flex.
Вот пример кода который не работает (разница только в 11 строке)
<body>
<div class="wrapper">
<div class ="Rectangle"></div>
<div class="But">Выйти</div>
</div>
</body>
<style>
body{
margin: 0;
overflow: hidden;
display: flex;
}
.wrapper{
display: table-cell;
vertical-align: middle;
width: 100vw;
height: 100vh;
}
.Rectangle{
width: 100vw;
height: 20vh;
background: green;
}
.But{
position: absolute;
width: 100vw;
text-align: center;
font-size: 10vmin;
}
</style>
Подскажите пожалуйста как можно ето исправить
На картике 1 то как должно быть, на картинке 2 уже все сломано