html - 为什么图标不居中？

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是你的 friend

.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