Как расположить блоки по центру и один над другим?

Question

[Сергей]

Добрый день.

Как тут расположить блоки один над другим?

В идеале хочу привести к такому виду:

Answer 1

[Артур Карапетян]

Ну контейнеру услуги задайте display: block и width: 100%

Comments

[Сергей]

Не помогло(

Answer 2

[Pavel Torbeev]

{
position:relative;
left: 50%;
transform: translateX(-50%);
}

Comments

[Сергей]

Так весь контент уезжает не пойми куда(

[Pavel Torbeev]

Стили, разумеется, необходимо добавить блокам, которые необходимо выровнять

[Сергей]

Pavel Torbeev: Разумеется) Не получается, блок по центру становится, все ок. Но при нажатие все улетает в новое далеко

Answer 3

[s-jet]

В текущей верстке, при абсолютном позиционировании видимо так нужно поменять:

.box__row-cell {
    top: 0;
    left: 50%;
    height: 49%;
}

.box__row-cell:nth-child(2) {
    left: 50%;
    bottom: 0;
    top: inherit;
}

Comments

[Сергей]

Хм. Близко. Но не по центру получается все равно( И при нажатии на бокс который ниже имеется пролаг - блок отлетает вверх и открывается на месте первого блока

[s-jet]

Вот сюда добавляем

.box__row-cell {  
    margin-left: -12%;
}

Вот это

.box__row-cell.active:nth-child(2) {
  bottom:0!important;
  top: inherit!important;
}

Вот так

Ставим ниже стиля для .active. А вообще я бы отказался от использование ипортантов, это дурной тон

[Сергей]

s-jet: Тогда после раскрытия уезжает заголовок влево)

[s-jet]

Ну добавьте к классу .active margin-left: 0; и будет все норм

[Сергей]

s-jet: Спасибо вам огромное. Огромнейшее)) Если позволите, можно понаглею чуть-чуть и спрошу пару вопросов.

1. Как правильно поиграться с тегами\классами чтобы получить такое без удаления выделенного красной рамкой блока? Иначе при раскрытие пропадает заголовок (что не удивительно ^_^):


2. Как правильно добавить картинку в указанные рамками места. Пробовал добавлять но почему то не видно картинку все равно. Только рамку:

[s-jet]

Сергей:
1) Немного не понял вопроса, да и не буду предлагать вам колхозы т.к. сейчас вижу не точности в верстке. Но по текущей верстке: я не понял зачем вы внутри одного контейнера дублируете одну и ту же информацию. Вот этот контейнер: box__row-cell-info--full вовсе не нужен. Правильнее вместо box__row-cell-info заголовку 1 раз дать класс box__row-cell-info-title (например)
и играться с ним в зависимости от модификатора .active.
з.ы. В css модификатор нельзя описывать отдельно от класса ибо модификаторов active может быть сколько угодно на сайте.

2) Как вариант вот так

[Сергей]

s-jet: Не понимаю как именно нужно переименоваться, можете дать пример или ссылку на литературу соответствующую?)) Имел ввиду чтобы небыло такого пробела под текстом.