SVGのテキストと中央揃え

Question

ラベルに含める必要があるインラインSVGがあります。しかし、私はそれをテキストに垂直に整列させることはできません。何かご意見は？私はそうのように追加した

：

<label for="menu-check-box">More<svg class="more-icon"><use xlink:href="#more-chevron"></use></svg></label> 

とスタイリングは、次のとおりです。

label { 
    cursor: pointer; 
    color: blue; 
} 

.more-icon { 
    width: 24px; 
    height: 24px; 
    fill: blue; 
} 

はここfiddleです。

Answer 1

垂直整列を助ける必要があります。

label svg {display:inline-block;vertical-align:middle} 

https://jsfiddle.net/tnux7pLx/2/