Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты

Как решить вопрос с центрированием в ячейке Grid?

Степан Воробьёв Ученик (174), закрыт 4 года назад
Помогите плз, с этим тяжело гуглимым вопросом.

Как правильно центруют текст внутри ячейки Grid Layout по вертикали, если нужно сделать бэкграунд на всю ячейку?
align-self:center работает, но если начанаешь тянуть бэкграунд, то ему центрироваться не куда. При stretch он растягивает, но текст оказывается сверху. vertical-align не работает (или я не правильно делаю).
Костылить маржинами и пэдингами не хочется, потому что и адаптив нарушается и как мне верится Grid может больше.
Лучшее пока к чему пришёл методом втыка это написать ячейке display: grid (не знаю на сколько это правильно, поясните пожалуйста):
.plus15 {grid-area: imgs/img4/span 1/span 1;
display: grid;
background: #122;
text-align: center;
}
Лучший ответ
Dmitriy Develop Гуру (2839) 4 года назад
Попробуйте flex:
display: flex;
justify-content: center; /* центрирование по горизонтали (если не нужно уберите) */
align-items: center; /* центрирование по вертикали*/

Имейте ввиду что flex задается родителю, а не самому элементу. Вот пример — https://jsfiddle.net/DimonDevelop/pxjs1eu4/1/
Степан ВоробьёвУченик (174) 4 года назад
О! Заработало. Я с флексом пробовал, но наверное где то что то недоучитывал. Спасибо.
А Grid внутри Grid'а писать ошибочно? Или это тоже норма, потому что вроде как работает...
Dmitriy Develop Гуру (2839) Если работает то вполне нормально, главное удостоверьтесь что это поддерживается всеми нужными вам браузерами, так как не все браузеры имеют полную поддержку grid — caniuse.com/#feat=css-grid . Например IE имеет частичную поддержку гридов с префиксом -ms (и то только с 10-й версии).
Остальные ответы
into it Оракул (57257) 4 года назад
Что он хочет? Я вообще не понял

*Не помогайте ему. Борзоты много
Степан ВоробьёвУченик (174) 4 года назад
Значит даже понять не хотел. Я даже картинку скинул. Если не знаешь иди дальше. Какой смысл умничать!
Dmitriy DevelopГуру (2839) 4 года назад
Не увидел борзоты в его вопросе.
into it Оракул (57257) Я говорил про комментарий на мой ответ
Похожие вопросы