Как расположить цифры по серединам клеток?

Question

[p3trukh1n]

Здравствуйте
Необходимо сделать небольшой квадратный циферблат. То, что имеется сейчас:

Но, тут встал вопрос: Как расположить цифры по центру клеток? line-height - не вариант, потому что высота клеток - резиновая...
Также, (уж простить лень лезть снова по сайтам, уж начал задавать вопрос, пожалуй добавлю и этот),
Как сделать, чтобы сами клетки циферблата (ну, естественно, и сам циферблат) были квадратными, не зависимо от размера и соотношения сторон дисплея?
___
Или, стоит не пытаться пока лезть в gridы, и использовать другой метод (недо)верстки? Если да, то какой?

Comments

[Rustam Bainazarov]

Знать grid, но не знать flex? Что-то новое :))

[p3trukh1n]

Рустам Байназаров, я знал про флекс, но думал, что это как альтернатива к гриду, и вместе их лучше не использовать :\
Спасибо за ответ.
А, "Как сделать, чтобы сами клетки циферблата (ну, естественно, и сам циферблат) были квадратными, не зависимо от размера и соотношения сторон дисплея?"

[Rustam Bainazarov]

Квадратными — это просто, но через хак соотношения сторон:
https://css-tricks.com/aspect-ratio-boxes/

Answer 1

[Рома Зварич]

Как расположить цифры по серединам клеток?

Добавьте следующие свойства для .place

.place {
    ...
    display: flex;
    justify-content: center;
    align-items: center;
}

Как сделать, чтобы сами клетки циферблата (ну, естественно, и сам циферблат) были квадратными, не зависимо от размера и соотношения сторон дисплея?

Пробую - не получается так сделать.
У Вас везде заданы относительные величины в гриде.
Если сделать так, чтобы высота квадратов увеличивалась пропорционально ширине, в определенный момент циферблат начинает выталкивать хедер и футер за пределы экрана. А при уменьшении, наоборот, все же начинает сжиматься.
Нужны хотя бы частично фиксированные величины.

А вообще, суть сохранения пропорции размеров элемента в следующем: внутрь блока вкладываем еще один блок и задаем ему "padding-bottom: 100%" (процентное отношение ширины к высоте, в нашем случае 100%, потому что стороны должны быть равны).
Получается вот такое.
Как я написал, работает лишь в определенном диапазоне ширины.

https://codepen.io/hisbvdis/pen/ZgGqNm?editors=1100

Comments

[p3trukh1n]

Спасибо за ответ, да
И, "Как сделать, чтобы сами клетки циферблата (ну, естественно, и сам циферблат) были квадратными, не зависимо от размера и соотношения сторон дисплея?"

[Рома Зварич]

p3trukh1n, обновил ответ. Дополнил и про это.

[p3trukh1n]

Рома Зварич, да, спасибо огромное

[p3trukh1n]

Рома Зварич, а с телефона - растягиваются:\ это можно как-то поправить?

[Рома Зварич]

p3trukh1n, Вы наверное не прочитали моё сообщение. Я там и описал, что проблемно это при текущих стилях. Лишь отчасти работает. Но в определённый момент гриды все же берут свое

[p3trukh1n]

Рома Зварич, как переписать стили, чтобы не было проблемно? Может, есть лучшие способы сверстать этот циферблат?

[Рома Зварич]

p3trukh1n, у меня нет никаких входных данных: что это за макет, как он будет применяться и как именно должен выглядеть.
Поэтому делал наугад.
Получилось вот так.
Вряд ли это самый оптимальный вариант, но для примера, думаю, подойдет.

https://codepen.io/hisbvdis/pen/Xvbyvd