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嵌套在.buttonclass中的.iconclass创建一个css规则，因为你说你无法直接从.buttonclass .iconclass{ margin:0; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }中删除边距。

这样的事情：

interp2d

更新了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文件，我相信这个简单的解决方案有效......

你也可以调整图标类的ewisth，但这似乎是你正在寻找的，如果我是正确的

<强> 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。

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

5 个答案: