Выравнивание по центру элемента, который шире, чем его родитель

[zenw]

Возникла подобная задача, нужно было сделать ряд из элементов (логотипов компаний) неизвестного количества, который выровнен по центру макета с фиксированной шириной и уходит за границы документа. Задачу решил (почти случайно, поиск в интернете натолкнул на мысль), но если честно, до сих пор не могу понять до конца, как это работает (и точно ли работает, вдруг где-то очевидный косяк?). Такого решения задачи в сети не находил (плохо искал, уверен, что есть), нечто похожее - http://www.greywyvern.com/?post=323, но там требуется дополнительный враппер. Работает вроде бы везде. Фишка в одинаковых отрицательных маргинах с обоих сторон (нужно, чтоб они были достаточно большими, 1000% в данном случае хватит, но проценты не принципиальны). Кто-нибудь объяснит, что я придумал, и как оно работает?) Ну и может быть, будет кому-нибудь полезно)

 

http://codepen.io/anon/pen/wadoxE

 

ЗЫ. Я знаю, что можно то же самое сделать с position absolute && transform translateX(-50%), но мой вариант работает даже в IE7, и не замыливает картинки.

[Z1gnet]

да что тут объяснять? все просто работает. вы растянули сильно растянули .content, внутри блоки у которых задан display:inline-block выровняли по центру с помощью text-align:center. по сути это выровненный текст по центру