Как выровнять как на скрине?

Question

[olya_097]

Как выровнять как на скрине?
что добавить
и может что лишнее?
https://codepen.io/anon/pen/gJNVNP

Comments

[Ankhena]

1. Зачем столько оберток?
У вас 3 контейнера и по 2 обертки у каждого дочернего блока.
static, container, static__wrap - объединяются в один.
static__item и static__block - тоже в один.
Итого: достаточно одного контейнера с ограниченной шириной и центрированием и в нем 4 блока.
2. Шрифты подключаются с одним названием, в вашем случае просто Montserrat. Различаются только пути к файлам, жирность и начертание.
Например,

@font-face {
        font-family: "OpenSans";
        src: url("fonts/opensans.woff2") format("woff2")
        url("fonts/opensans.woff") format("woff") ;
        font-weight: normal;
        font-style: normal;
        }

        @font-face {
        font-family: "OpenSans";
        src: url("fonts/opensansbold.woff2") format("woff2"),
        url("fonts/opensansbold.woff") format("woff");
        font-weight: 700;
        font-style: normal;
        }

3. С выравниванием есть разные способы. Выбор зависит от допустимого контента и ограничения по размерам карточек.
Самый простецкий без доп.оберток: первому абзацу с названием задать высоту в 2 строчки и вертикальное выравнивание по центру.

4. width: calc(100% / 4 - 16px); 100% на 4 неплохо делится без участия браузера.

Answer 1

[ma4t]

Омагад как не удобно разметку читать.
Я так понял они у вас растягиваются лишнего по вертикали.
В общем родителю который содержит эти три строки, напишите display: flex; flex-direction: column, align-items: center, justify-content: center; И все
а каждому дитю, margin-bottom: какой Вам нужен
Один из способов

вроде бы flex-direction: column в каких-то браузерах тупит. ТАк что можно добавить обертку еще
И сделать иначе

<div class='1' style="dysplay:flex, align-items: center, justify-content:center" padding='15px 20px'>
      <div class='2'>
           <div class='text' style='margin-bottom='10px'>Зерно</div>
           <div class='text' style='margin-bottom='10px'>123</div>
           <div class='text'>год годовый</div>
      </div>
  <div/>

Answer 2

[Дмитрий]

В body удалить margin: 0; и padding: 0;. и добавить их в * { }.

Comments

[Ankhena]

Бывают более вредные советы, но редко.

Зачем обнулять те отступы, которые потом всё равно нужно задавать обратно?
Обнулять имеет смысл только те, которые никогда не понадобятся в дальнейшем.

[Дмитрий]

Ок. В .static__number вылезли дополнительные марджины сверху и снизу в 60px равные высоте текста font-size: 60px;.