html - 图标不会在按钮中居中对齐

我有一个像这样设置的按钮：



我一生都无法将图标放在按钮中间。

这是我的CSS：

.buttonclass {
  width: 30px;
  height: 30px;
  border-radius: 20px;
  background-color: #1DBE60
}


.iconclass {
  width: 20px;
  height: 20px;
  margin: 7.5px;
}

唯一需要注意的是，我需要iconclass上的空白。

这是一团...

http://plnkr.co/edit/6fLYQlpFmDdf7aWenBtp?p=preview

最佳答案

将图像设置为背景图像可能是最好的选择。

如果您不能这样做，那么我可能会为嵌套在该.iconclass中的.buttonclass创建一个css规则，因为您说不能直接从.iconclass中删除​​边距。

像这样：

.buttonclass .iconclass{
  margin:0;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}

更新了Plunker。