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

Question

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

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

这是我的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

Answer 1

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

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

像这样：

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

更新了Plunker 。

Answer 2

查看框大小，这将有助于它包含内容，您可以从此处调整宽度/高度。 http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

像这样很好地工作：

.buttonclass {
  width: 30px;
  height: 30px;
  border-radius: 20px;
  background-color: #1DBE60;
  box-sizing:content-box;
  padding:0px;
}    

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

Answer 3

我正在切换您的CSS文件，并且我相信这个简单的解决方案可以工作...

您还可以调整图标类的大小，但是如果我正确的话，这似乎就是您要寻找的内容

的CSS

.buttonclass {
  width: 30px;
  height: 30px;
  text-align: center;
  position: relative;
  border-radius: 20px;
  background-color: #1DBE60
}

.iconclass {
width:15px;
}

Answer 4

尝试以下解决方案（仅更改图像类）

.iconclass {
    width: 20px;
    height: 20px;
    margin: 3.4px;
    position: absolute;
    top: 0;
    left: 0;
}

这个对我有用。

Answer 5

只需使用margin: 0px -2px -2px -2px; 到.iconclass 。