CSSのSVGの垂直方向の配置

Question

インラインSVGアライメントに問題があります。テキストとSVGを含むボタンを作成しました。そして、SVGがテキストと少なくとも同じ大きさであれば、アラインメントは正しく機能しますが、SVGの高さがテキストよりも小さい場合は失敗します。

真ん中が正確であることを示すために、2色の背景ボタンが付いたテストケースを作成しました。 SVGの高さがテキストの高さよりも小さいので、2番目のケースが完全に整列していないことを近く見ているかどうかを見ることができます。

これを修正する方法はありますか？それ以外のやり方はしないでください（jsしてください）？

テストケース：https://goo.gl/KYDKGH

Answer 1

fiddle 1 - あなたがこのようなオブジェクトのコンテナとposition:absoluteにposition:relativeを使用することができます。

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 - またはこのようなコンテンツを揃える垂直にalign-itemsを有する容器にdisplay:flexを使用：

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水平整列のためのものです。