Images become misaligned compared to div items, despite the same css

Question

I have a div .pets with several images and divs within it. The css for class pet is applied to both img and div but the images become misaligned as in the image: Here is my html:

<div class="container">
    <div class="pets">
        <img src="/images/animal1.png" class="pet">
        <img src="/images/animal1.png" class="pet">
        <img src="/images/animal1.png" class="pet">
        <div class="pet"></div>
        <div class="pet"></div>
        <div class="pet"></div>
        <div class="pet"></div>
        <div class="pet"></div>
        <div class="pet"></div>
        <div class="pet"></div>
    </div>
</div>

And css for pets and pet:

.pets {
    background-color: lightgrey;
    margin-top: 15vh;
    border: 1px solid black;
    text-align: center;
}
.pet {
    background-color: red;
    border-radius: 100%;
    width:20vh;
    height:20vh;
    display: inline-block;
}

How can I make the images align the same as the divs?

Answer 1

Since you have given display: inline-block; add vertical-align too:

.pet {
  background-color: red;
  border-radius: 100%;
  width:20vh;
  height:20vh;
  display: inline-block;
  vertical-align: middle;
}

The default is vertical-align: baseline;. That's the reason.

.pets {
  background-color: lightgrey;
  margin-top: 15vh;
  border: 1px solid black;
  text-align: center;
}

.pet {
  background-color: red;
  border-radius: 100%;
  width: 20vh;
  height: 20vh;
  display: inline-block;
  vertical-align: middle;
}

<div class="container">
  <div class="pets">
    <img src="//placehold.it/100?text=Pet" class="pet">
    <img src="//placehold.it/100?text=Pet" class="pet">
    <img src="//placehold.it/100?text=Pet" class="pet">
    <div class="pet"></div>
    <div class="pet"></div>
    <div class="pet"></div>
    <div class="pet"></div>
    <div class="pet"></div>
    <div class="pet"></div>
    <div class="pet"></div>
  </div>
</div>