CODEWITHSUNDEEP
htmlcss
evghenii turco
evghenii turco

Reputation: 43

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?

Upvotes: 0

Views: 88

Answers (4)

G-Cyrillus
G-Cyrillus

Reputation: 105903

Because your image are standing on the baseline. Defaut, when not reset, is 1em (average 16px in most browser defaut setting).

So you have approximatively a line-height of 16px where sits your image + 14px remainings below.

If you set a line-height to 30px, it will set the minimal height of your coontainer (1 line) and image will sit there.

The 101 way before playing with BFC is a line-height equal to height and it will do the job here with no fuss.

(you can remove height, line-height should size the element height since there is a single line ... hmm you mention older browser: so IE5.5/IE6 might bug and increase height a little more than 30px ... for the others no troubles )

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

Upvotes: 2

Miguel
Miguel

Reputation: 20633

Flexbox is your 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 Demo: https://jsfiddle.net/kvm20oeb/

Support: All modern browsers, IE11 and up. source

Upvotes: 4

Pushpendra Kumar
Pushpendra Kumar

Reputation: 1674

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

Upvotes: 0

matt.
matt.

Reputation: 2369

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>

Upvotes: 2

Related Questions