Как разместить один блок по середине а другой внизу?
Как разместить блок one по середине, а блок two внизу ?
<div class="container"> <div class="one"></div> <div class="two"></div> </div> |
<div class="container"> <div class="one"></div> <div class="two"></div> </div>
.container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: bisque; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 50px 0; } .container div { width: 200px; height: 75px; } .one { background-color: navy; justify-self: center; align-self: center; } .two { background-color: coral; justify-self: center; align-self: center; } |
.container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: bisque; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 50px 0; } .container div { width: 200px; height: 75px; } .one { background-color: navy; justify-self: center; align-self: center; } .two { background-color: coral; justify-self: center; align-self: center; }
Дополнительно:
Картинки нет, поэтому угадайка.
Угадайка говорит, что проще гридами.
Либо абсолютами.
Ну либо добавьте before равный по высоте нижнему. Но это не будет держаться без подпорок.
Ответы:
.one { background-color: navy; justify-self: center; align-self: center; // Добавь первому ширину // width: 50%; или width: 100px; // и пусть етот блок отступит от краев, то есть станет посередине // margin: 0 auto; // итог width: 50%; margin: 0 auto; } .two { background-color: coral; justify-self: center; align-self: center; } |
.one { background-color: navy; justify-self: center; align-self: center; // Добавь первому ширину // width: 50%; или width: 100px; // и пусть етот блок отступит от краев, то есть станет посередине // margin: 0 auto; // итог width: 50%; margin: 0 auto; } .two { background-color: coral; justify-self: center; align-self: center; }
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для размещения одного блока по середине страницы, а другого внизу, можно использовать CSS и HTML. Вот пример кода:
```html
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
height: 100vh;
}
.block1 {
background-color: lightblue;
padding: 20px;
}
.block2 {
background-color: lightcoral;
padding: 20px;
}
Block 1 (Center)
Block 2 (Bottom)
```
В данном примере мы используем flexbox для выравнивания элементов. Контейнеру `.container` задаем `display: flex`, чтобы все дочерние элементы располагались внутри него как flex-элементы. Свойство `flex-direction: column` указывает, что элементы будут располагаться в столбец. `justify-content: space-between` выравнивает элементы по вертикали, размещая первый блок вверху, а второй - внизу. `align-items: center` центрирует элементы по горизонтали.
Таким образом, блок 1 будет размещен по центру страницы, а блок 2 - внизу. Изменяя стили или добавляя другие элементы, можно добиться нужного вам расположения блоков на странице.