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

creating a button using btn class, and add image, text with in that

使用btn类创建一个按钮，并在其中添加图像，文本

here both are vertically center if the image size is small, ( like 40% )

如果图像尺寸很小，这里都是垂直中心（如40％）

but if the image size is 90% of the btn text is not vertically center

但如果图像尺寸是btn文本的90％不是垂直居中

can any one help me, to create a button, with a text and an image and text will be vertically center.

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

please check the demo

请查看演示

html:

HTML：

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

css :

css：

img {
  height: 90%;
}

3 个解决方案

#1

In your plunker add below css line:

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

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

#2

try this i've added the svg inside an i tag and controlled the height of the svg inside it, see the code snippet

试试这个我已经在一个i标签内添加了svg并控制了svg里面的高度，请参阅代码片段

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>

 <a href="#" class="btn"> 
<!-- added the svg to the html -->  
<i><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="384" height="448" viewBox="0 0 384 448">
<path fill="#000" d="M246.25 243.5c4.25 0 45 21.25 46.75 24.25 0.5 1.25 0.5 2.75 0.5 3.75 0 6.25-2 13.25-4.25 19-5.75 14-29 23-43.25 23-12 0-36.75-10.5-47.5-15.5-35.75-16.25-58-44-79.5-75.75-9.5-14-18-31.25-17.75-48.5v-2c0.5-16.5 6.5-28.25 18.5-39.5 3.75-3.5 7.75-5.5 13-5.5 3 0 6 0.75 9.25 0.75 6.75 0 8 2 10.5 8.5 1.75 4.25 14.5 38.25 14.5 40.75 0 9.5-17.25 20.25-17.25 26 0 1.25 0.5 2.5 1.25 3.75 5.5 11.75 16 25.25 25.5 34.25 11.5 11 23.75 18.25 37.75 25.25 1.75 1 3.5 1.75 5.5 1.75 7.5 0 20-24.25 26.5-24.25zM195.5 376c86.5 0 157-70.5 157-157s-70.5-157-157-157-157 70.5-157 157c0 33 10.5 65.25 30 92l-19.75 58.25 60.5-19.25c25.5 16.75 55.75 26 86.25 26zM195.5 30.5c104 0 188.5 84.5 188.5 188.5s-84.5 188.5-188.5 188.5c-31.75 0-63.25-8-91.25-23.5l-104.25 33.5 34-101.25c-17.75-29.25-27-63-27-97.25 0-104 84.5-188.5 188.5-188.5z"></path>
</svg>
</i>
  <span>Testing</span>
</a>

#3

-1

Put to the image css a new atributte vertical-align:middle;

把图片css放到一个新的atributte vertical-align：middle;

#1