将SVG与按钮垂直对齐的最佳方式是什么？

Question

如何垂直对齐这些SVG图像以垂直匹配我正在创建的按钮？

<button style= 
"width:100px;height:100px;border-radius:50%;background-color:white;border-color:#0F75BC;"> 
Step 1<br> 
.</button> <svg height="50" viewbox="0 0 512 512" width="50" xmlns= 
"http://www.w3.org/2000/svg"> 
<path d= 
"M 64.00,416.00l 96.00,96.00l 256.00-256.00L 160.00,0.00L 64.00,96.00l 160.00,160.00L 64.00,416.00z"> 
</path></svg> <button style= 
"width:100px;height:100px;border-radius:50%;background-color:white;border-color:#0F75BC;"> 
Step Two<br> 
.</button> <svg height="50" viewbox="0 0 512 512" width="50" xmlns= 
"http://www.w3.org/2000/svg"> 
<path d= 
"M 64.00,416.00l 96.00,96.00l 256.00-256.00L 160.00,0.00L 64.00,96.00l 160.00,160.00L 64.00,416.00z"> 
</path></svg> <button style= 
"width:100px;height:100px;border-radius:50%;background-color:white;border-color:#0F75BC;"> 
Step 3<br> 
.</button> 

jsfiddle

Answer 1

你可以喜欢这种风格的两个按钮和SVG：

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

希望这有助于。