Как выровнить иконку?

Question

[lavezzi1]

Здравствуйте! Как выровнить иконку? В первом примере видно, что она сьзжает по горизонтали, во втором по вертикали.
Проблему решает display: flex но нужно без него.

Спасибо

codepen.io/anon/pen/mPWGvw?editors=1100

Comments

[Андрей Федоров]

Почему 11х6, а не 12х6?

[lavezzi1]

Андрей Федоров: может потому что иконка 11х6?

[Андрей Федоров]

lavezzi1: Так она у вас кривая из за этого и плохо центруется.

[Сергей Тутуков]

Линии debug находятся на 50%, следовательно они сдвинуты.
Пример: блок 100x100 и если рисовать линии в 1px с дебагом в 50%, то по горизонтали будет линия на 51px, по вертикали тоже на 51px. Линии надо ровно сначала провести)
Мб .icon{
Position:absolute;
Top:50%;
Margin-top:-3px;
Left:50%;
Margin-left:-5.5px;
}

Answer 1

[bro-dev]

Самое простое дорисовать иконку до фигуры с нужным центром.