Форум

fori · #1 (**permalink**) 27.01.2021, 17:42

Здраствуйте, в процесе выравнивания столкнулся с необходимостю расположить 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 уже все сломано

рони · #2 (**permalink**) 27.01.2021, 18:33

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>

fori · #3 (**permalink**) 27.01.2021, 18:54

Спасибо за ответ, но в вашем случае получится что по центру выровнян блок (div+текст), а мне нужно чтоб по центру был выровнян только .Rectangle, а блок с текстом ишел просто за ним снизу.
К примеру на фото 1 центр картинки по вертикали расположен на желтой линии, центр зеленого div-a (красный) немного выше центра картинки, так как вы выравнивали целый контейнер по центру.
мне нужно получить результат где центр зеленого div совпадает с центром картинки, а текст просто идет снизу, какбудто в position: relative
На фото 1 выравнивание по блоку (желтая линия центр документа, красная центр diva) который получился у вас, на фото 2 выравнивание только diva, а текст снизу, который я пытаюсь сделать

fori · #4 (**permalink**) 27.01.2021, 18:59

Если увеличить размер текста разница в подходах будет более заметна
1 картика ето то что мне нужно, 2 то что получается у вас

рони · #5 (**permalink**) 27.01.2021, 19:32

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>

Форум

Справочник

Discord чат

Курсы javascript