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

Question

我有一个这样设置的按钮:

我这辈子都无法让图标位于按钮的中间。

这是我的 CSS:

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


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

唯一需要注意的是，我需要图标类的边距。

这是一个小插曲......

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

Answer 1

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

如果你不能那样做，那么我可能会为嵌套在 .iconclass 中的 .iconclass 创建一个 css 规则，因为你说你不能从.iconclass 直接。

像这样:

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

已更新 Plunker .