Тут нужно использовать clearfix?

Question

[123qwe]

мне нужно css+html подтянуть, и я почти неделю потратил только на них, и вот остались только нерешенные вопросы.
Я понимаю концепцию clear в css, но не могу ее применить правильно.

У меня есть вот такой код:

https://jsfiddle.net/bachshwa/4wp0gbp1/2/

Задача в том, что бы квадраты были внутри конейнера див, а текст по середине как и прописано в html.
Пробелема решается просто переносом h1 вниз дива "контейнер".
Вопрос в том, можно ли не меняя структуру html выровнять все так, как я хочу?
мне бы хотелось это сделать как-то через clearfix:before, after.

Comments

[Дмитрий]

https://jsfiddle.net/soledar10/uwj5sm9d/

[123qwe]

Дмитрий: как я и написал, что знаю, что проблема решается пененосом h1 вниз.Но мне бы хотелось это решить без изменения структуры html, так как там все выглядит логично.

[Дмитрий]

https://jsfiddle.net/soledar10/p26we2tq/

[Дмитрий]

более логичным будет - left,center, right

Answer 1

[Денис Т]

h1 добавляешь display: inline-block; (h1 - блочный элемент, он просто вытесняет из контейнера черные квадраты)
.container добавляешь text-align: center; (у h1 можешь убрать text-align, он не нужен)
вот и все

Answer 2

[Михаил Чирский]

Есть 2 способа:
1. Position absolute
2. Flexbox
Выбирайте какой вам подходит

https://jsfiddle.net/4wp0gbp1/4/

Comments

[Денис Т]

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

[Михаил Чирский]

Денис Тюкавин: Все зависит от задачи, если вас послушать, то Flex не стоит использовать еще очень долгое время, однако возьмем в пример гугл, MDL, где он исп. во всю. а поддерживать старые ИЕ вроде 8 версии, я считаю не актуальным, и пока мы будем все это поддерживать с плюшками, никто никогда не будет обновляться.