Поставить 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, время: 17:42. |