Адаптивные блоки отзывов на flex, не центруется внутри текст, что делать?

Question

[Антон Вебсайтовский]

Всем привет.
Сделал блоки отзывов на флекс, заголовок на темно синем фоне центруется, а вот ниже текст нет, не могу понять в чем дело, подскажите как решить проблему.

Рабочий пример тут:
https://jsfiddle.net/onvxsL9k/1/

Не центрует по вертикали то что обвел.

Comments

[Антон Вебсайтовский]

Максим Ленский, то есть хочешь сказать что мешает text-align: center; он не мешает и он работает, ты видимо не так понял с центрованием по горизонтали нет проблем, а вот вертикали есть. и проблема в том что flex центрования почему не срабатывает.

[Антон Вебсайтовский]

Максим Ленский, у меня там подключен такой.

-webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;

и по вертикали и по горизонтали.

[Антон Вебсайтовский]

Если сделать как ты говоришь то ничего не меняется ), только кривое становиться.


Так что как сделано у меня все ок, только отцентровать то что я не могу и все, пока не врубаюсь почему там flex не срабатывает центрования.
Хотя на заголовки он отлично работает.

[Виталий Першин]

А почему о должен центрироваться? Нет желания заглянуть в инспектор и посмотреть что происходит с элементами и почему они себя так ведут?

[Антон Вебсайтовский]

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

[Ankhena]

Антон Вебсайтовский, вы там скажите, когда совсем затоскуете ))))

[Антон Вебсайтовский]

Ankhena, уже без тебя затосковал ) пока еще не понял, почему не центрует и что мешает.

[Ankhena]

Антон Вебсайтовский, мы кстати, не на ты ;)

Объяснение почему оно центрирует, но кажется, что нет: https://jsfiddle.net/h3oszuab/

[Антон Вебсайтовский]

Ankhena, не понял, что там по ссылке, тож самое все )

[Ankhena]

Антон Вебсайтовский, не та ссылка в буфере осталась
вот так https://jsfiddle.net/h3oszuab/2/

[Антон Вебсайтовский]

Ankhena, и опять ) что ты там сделала ) я чет не понял ) бордера вижу ) красные

[Антон Вебсайтовский]

Ankhena, ты как обычно ) только не говори потом ничего против ))))

[Ankhena]

Антон Вебсайтовский, вы задали центрирование блокам, у которых высота определяется их же содержимым.
Так им без разницы какое вертикальное выравнивание будет задано. Хоть по верху, хоть по низу, хоть по центру = визуально будет одно и то же. Потому что там нет свободного места для выравнивания.

Кстати, именно, за этим вас отправили в инструменты разработчика. Ими пользоваться вы не хотели, поэтому я просто обвела блоки рамками, чтобы было видно что происходит и почему от выравнивания 0 толку.

Будет высота - будет видно выравнивание.
Раз у заголовочных "ячеек" явно задана высота, а высота родителей определяется за счет stretch у флекса, то для столбцов можно тоже задать флекс и растянуть ячейки с данными. Удобнее сделать главную ось по вертикали и fx grow 1.

[Антон Вебсайтовский]

Ankhena, так я это знаю, что задается высотка исходя из контента ! так флексу же пофиг, он просто выравнивает по вертикали или горизонтали ! тем самым и выходит адаптация.
Обычно с этим проблем не возникало у меня, а тут вот появилась.

Разве флекс не центрует по ширине и высоте блока, раз правый блок растягивает весь контейнер.
Я думал флексу все равно, просто есть от и до и он центрует.

Попробовал применить grow 1, ничего не изменилось.

[Ankhena]

Антон Вебсайтовский,

Попробовал применить grow 1, ничего не изменилось.

родителю флекс бы...
чтобы у дочерних заработали свойства флексов и ось повернуть по вертикали

[Антон Вебсайтовский]

<div class="otb1">
            <div class="ot1 df fcc"><b>Имя</b></div>
            <div class="df fcc">
              <strong>Иван Иванов</strong>
            </div>
          </div>

Родителю, это ты про otb1, я пробовал.
Танцы с бубном: https://jsfiddle.net/Ltp0c86b/

[Ankhena]

Антон Вебсайтовский,
Сравните
у вас так: https://jsfiddle.net/datk45om/
надо: https://jsfiddle.net/hpywk9cL/
Красные рамки специально оставила.
Дальше тюнинг вашими отступами и другими нюансами.

[Антон Вебсайтовский]

Так ну вот, вышло https://jsfiddle.net/Ltp0c86b/1/