Blink (именно он) странно ведёт себя, если margin/padding span’а задан в процентах. Видимо, там есть какой-то внутренний кэш шрифтов, и он для определения нужного размера span’а берёт устаревшие цифры.
Попробуйте помасштабировать страницу, и увидите, как пляшут надписи.
Вообще никто не говорит, как должен действовать margin в % для span’а. Но метод центровки откровенно странный и представляет собой ручную подгонку под желаемое (причём очень грубую). Я бы сделал достаточно большой блок и в нём бы отцентрировал иконку и надпись. Если какой-то рендерер не уместит надпись в одну строку — ну пускай…
UPD. Уточняю: Blink так ведёт себя, когда в блоке есть замкнутый круг: из-за float’а его ширина зависит от вёрстки текста в нём; из-за процентных отступов вёрстка текста зависит от размера блока.
Средний
