Как сделать вертикальное выравнивание элементов внутри full-height css grid по центру?
разбираюсь с css grid. Набросал небольшой макет, тренируюсь. Мне нужно получить полностью адаптивную двух-колоночную сетку на всю высоту! При этом, что бы для мобильных устройств сетка менялась с двух-колоночной на двух-строчную и так же оставалась ровно по полам и на всю высоту! Вроде бы что то вышло, но не могу выровнять контент внутри этих grid-item, в данном случае текст нужно выровнять по вертикали, нашел решение, но оно не совсем подходит: justify-items: center;align-items: center; Если присвоить колонкам эти свойства, они становятся ровно по центру, но теряют свои full-width и full-height свойства. Как этого избежать?
Отслеживать
задан 23 июл 2021 в 16:27
Javier Pena Javier Pena
57 5 5 бронзовых знаков
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Можно затемняющий фон сразу на картинку в ссылке повесить, а не на span. Соответственно не будет необходимости span делать 100% по высоте. Таким образом можно его выравнять внутри ссылки безо всяких line-height;
@import url('https://fonts.googleapis.com/css2?family=Marck+Script&display=swap'); body < margin: 0 auto; font-family: "Marck Script", cursive; >.wrapper < display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 0px; grid-auto-rows: auto; grid-auto-columns: auto; height: 100vh; >.wrapper a < text-decoration: none; color: #fff; font-size: 10vh; text-align: center; background-size: cover; transition: .5s linear; >.wrapper a:hover .one < grid-column: 1 / 2; background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F44%2F2019%2F10%2F30%2F7218335.jpg); background-position: center; >.two < grid-column: 2 / 2; background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(https://image.freepik.com/free-photo/top-view-fresh-red-strawberries-with-tea-olives-dark-floor-fruit-berry-fresh_140725-82440.jpg); background-position: center; >@media screen and (max-width: 600px) < .wrapper < grid-template-columns: 100%; grid-template-rows: 50%; grid-gap: 0px; height: 100vh; >.wrapper a < grid-column: auto; display: grid; place-items: center; >.one .two > Ресторан здорового питания ЭКО-Магазин