@p3trukh1n
NooB IN WeB

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

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

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

Добавьте следующие свойства для .place
.place {
    ...
    display: flex;
    justify-content: center;
    align-items: center;
}



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

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

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

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

Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы