如何垂直居中图像，文本在materializecss btn

Question

使用btn类创建按钮， 并在其中添加图片，文字

如果图像尺寸很小（如40％），

这两个都是垂直居中的

但是如果图片大小是btn的90％ 文字不是垂直中心

任何人都可以帮助我创建一个带有文本和图像的按钮 和文本将垂直居中。

请查看demo

html：

<a href="#" class="btn">   
  <img class="" src="svg.svg" alt="">
  <span>Testing</span>
</a>

css：

img {
  height: 90%;
}

Answer 1

试试这个我已在svg中添加i tag并控制其中height的{​​{1}}，请参阅代码段

svg

i{
width:auto; text-align:center;
}
i svg {
width:auto;height:40%;display:block;float:left;margin-right:10px;position:relative;top:33%;
}

Answer 2

在你的plunker中添加以下css行：

img{width:20px;height:20px;vertical-align:middle}
span{padding-left:7px;}

Answer 3

将图片css放入一个新的atributte vertical-align：middle;