Вертикальное выравнивание SVG в CSS

Question

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

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

Есть ли способ исправить это? Делать это по-другому (без js пожалуйста)?

Тестовый пример: https://goo.gl/KYDKGH

Answer 1

fiddle 1 - Вы можете использовать position:relative на контейнере и position:absolute на объектах, как это:

position: absolute; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
    left: 0; 
    right: 0; 
    margin: auto; 
    text-align: center; 

В top: 50% перемещает объект в центре вертикально контейнера собирание вершины объект в качестве эталона (а не его центр), поэтому transform: translateY перемещает его на 50% от его размера вверх, чтобы он точно находился на середине контейнера (по центру объектов).

PS: text-align:center;left:0;right:0; и margin:auto предназначены для горизонтального выравнивания.

fiddle 2 - Или использовать display:flex на контейнере с align-items для вертикального выравнивания содержимого, как это:

display: -webkit-flex; /* Safari */ 
    display: flex; 
    -webkit-align-items: center; /* Safari 7.0+ */ 
    align-items: center; 
    -webkit-justify-content: center; 
    justify-content: center; 

PS: justify content для горизонтального выравнивания.