Центрирование внутри блока

Заметил, что многие неправильно выравнивают элементы внутри блоков. Я рассказывал, как правильно центрировать формы на странице. А теперь посмотрим, как выравнивать небольшие элементы внутри блока на примере несимметричных иконок.

Вот так выравнивает фотошоп при автоматическом выравнивании горизонтальных центров иконки и прямоугольника под ней:

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

Если верстальщик будет верстать без Pixel Perfect, то он запросто может сделать криво, если нарежет иконки вот так

а потом программно все отцентрирует. А так как PixelPerfect’ом не пользуется, то и подумает, что все ок 🙂 Чтобы этого избежать, можно подготовить спрайт, в котором сразу правильно поставить иконки:

Вообще спрайт должен делать верстальщик. Поэтому, если вдруг, кто-то из верстальщиков это читает, то у нас +1 к крутым верстальщикам, ведь теперь после их верстки иконки будут выровнены правильно 🙂

Еще по по теме: Центрирование форм на странице