圖標不會在按鈕中居中對齊

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 。