Question

我试图制作三个按钮 - 向上箭头，向下箭头和注释按钮。对于某些共鸣，我不能将图标置于按钮内。这是代码：

.rate {
    display: inline-block;
    height: 30px;
    width: 40px;
    border: 1px solid #d3d3d3;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
}

.rate img {
    vertical-align: middle;
    width: 20px;
    height: auto;
}

        <div class="rate"><img src="up.png"></div>
        <div class="rate"><img src="down.png"></div>
        <div class="rate"><img src="comment.png"></div>

那么似乎是什么问题？

Answer 1

Flexbox是你的朋友

.rate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 40px;
  border: 1px solid #d3d3d3;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
}

.rate img {
  width: 20px;
  height: auto;
}

<div class="rate"><img src="http://placekitten.com/100/100"></div>
<div class="rate"><img src="http://placekitten.com/100/100"></div>
<div class="rate"><img src="http://placekitten.com/100/100"></div>

JSFidde演示：https://jsfiddle.net/kvm20oeb/

支持：所有现代浏览器，IE11及以上版本。 source

Answer 2

您可以对图像应用固定高度，并使用relative positioning来获得所需的结果。

.rate {
  display: inline-block;
  height: 30px;
  width: 40px;
  border: 1px solid #d3d3d3;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
}
.rate img {
  position: relative;
  top: 5px;
  width: 20px;
  height: 20px;
}

<div class="rate">
  <img src="up.png">
</div>
<div class="rate">
  <img src="down.png">
</div>
<div class="rate">
  <img src="comment.png">
</div>

Answer 3

因为您的图像站在基线上。 Defaut，当没有重置时，是1em（在大多数浏览器defaut设置中平均为16px）。

所以你的线条高度大约是16像素，你的图像位于下方+ 14px。

如果将行高设置为30px，则会设置coontainer的最小高度（1行），图像将位于此处。

在玩BFC之前的101路是一个等于高度的行高，它可以毫不费力地完成这项工作。

（你可以删除高度，行高应该调整元素高度，因为有一行...嗯你提到旧的浏览器：所以IE5.5 / IE6可能会出错并增加高度30px ......其他人没有麻烦）

＆＃13;

.rate {
  display: inline-block;
  /*height: 30px;*/
  line-height: 30px;
  width: 40px;
  border: 1px solid #d3d3d3;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
}
.rate img {
  vertical-align: middle;
  width: 20px;
  height: auto;
}

＆＃13;

<div class="rate">
  <img src="http://dummyimage.com/20x20&text=↑">
</div>
<div class="rate">
  <img src="http://dummyimage.com/20x20&text=↓">
</div>
<div class="rate">
  <img src="http://dummyimage.com/20x20&text=♥">
</div>

＆＃13;

Answer 4

.rate img{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
      }

为什么图标不居中？

4 个答案: