На этом изображении вы можете увидеть это в моем макете, когда я наведу над коробкой, текст в поле станет центром вертикально, и это происходит, когда я добавляю «Align-content: center;» Под селектором .box: Hover, а .box-это класс, связанный со всеми изгибными элементами в моем гибком контейнере. Но, как я знаю, «выравнивание-контент» не может использоваться в изгиб. />
Код: Выделить всё
CSS Flexbox
.container {
border: 2px solid grey;
display: flex;
height: 500px;
width: 500px;
flex-direction: row;
justify-content: center;
align-content: center;
}
.box {
height: 100px;
width: 100px;
border: 2px solid black;
margin: 15px;
}
.box:hover {
align-content: center;
}
#box1 {
background-color: red;
}
#box2 {
background-color: blue;
}
#box3 {
background-color: orange;
}
#box4 {
background-color: aqua;
}
#box5 {
background-color: purple;
}
BOX1
BOX2
BOX3
BOX4
BOX5
Подробнее здесь: https://stackoverflow.com/questions/796 ... of-flex-co
Мобильная версия