Поставить div после вертикально-выровняного div
Вложений: 2
Здраствуйте, в процесе выравнивания столкнулся с необходимостю расположить 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 уже все сломано |
fori,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style> body{ margin: 0; overflow: hidden; display: flex; } .wrapper{ display: flex; width: 100vw; height: 100vh; justify-content: center; flex-direction: column; } .Rectangle{ width: 100vw; height: 20vh; background: green; } .But{ width: 100vw; text-align: center; font-size: 10vmin; } </style> </head> <body> <div class="wrapper"> <div class ="Rectangle"></div> <div class="But">Выйти</div> </div> </body> </html> |
Вложений: 2
Спасибо за ответ, но в вашем случае получится что по центру выровнян блок (div+текст), а мне нужно чтоб по центру был выровнян только .Rectangle, а блок с текстом ишел просто за ним снизу.
К примеру на фото 1 центр картинки по вертикали расположен на желтой линии, центр зеленого div-a (красный) немного выше центра картинки, так как вы выравнивали целый контейнер по центру. мне нужно получить результат где центр зеленого div совпадает с центром картинки, а текст просто идет снизу, какбудто в position: relative На фото 1 выравнивание по блоку (желтая линия центр документа, красная центр diva) который получился у вас, на фото 2 выравнивание только diva, а текст снизу, который я пытаюсь сделать |
Вложений: 2
Если увеличить размер текста разница в подходах будет более заметна
1 картика ето то что мне нужно, 2 то что получается у вас |
fori,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style> body{ margin: 0; overflow: hidden; display: flex; } .wrapper{ width: 100vw; height: 100vh; } .Rectangle{ width: 100vw; height: 20vh; background: green; transform: translateY(44vh); } .But{ height: 20vh; text-align: center; font-size: 10vmin; transform: translateY(44vh); animation: test 5s ease-in-out infinite; } h1{ position: fixed; height: 1px; width: 100vw; top: 50%; background-color: #FFFF00; } @keyframes test { 50% { font-size: 40vmin; } } </style> </head> <body> <div class="wrapper"> <div class ="Rectangle"></div> <div class="But">Выйти</div> </div><h1></h1> </body> </html> |
Часовой пояс GMT +3, время: 14:58. |