evghenii turco evghenii turco - 7 months ago 12
HTML Question

Why aren't icons centered?

Im trying to make three buttons - arrow up, arrow down and comment button. For some reson i can't center the icons inside the buttons. Here is the code:



.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>





So what seems to be the problem?

Answer

You can apply a fixed height to the image and use relative positioning to get the desired result.

.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>