Bootstrap + CSS. Выравнивание объектов в контейнере.

Решил написать коротенькую статейку, т.к. пара дней попыток разобраться как это можно сделать не дала результата — никто не мог ничего сказать, пока на одном форуме одна умная голова не раскрыла секрет.

Итак, пусть у вас есть в контейнере несколько объектов, пусть это будут объекты класса «MEDIA». И пусть вам нужно их выровнять — у меня это были преимущества на сайте — смотрите следующий скрин.

Как не пытался — получалось вот так — четыре преимущества прижимаются к левому краю несмотря не на что:

justify_before

Оказалось есть в CSS3 замечательный класс «FlexBox».

  • Задаем для родительского элемента медиа объектов (у меня это CONTEINER новый класс, например «Obj_Justify».
  • В Style.CSS прописываем: display:flex;  justify-content:center;

Все все объекты выровнялись по середине контейнера!:

justify_after

Ну и можно творить совершенно замечательные вещи с этим классов — детали можно прочесть тут: https://html5book.ru/css3-flexbox/

Добавить комментарий