html - 与 div 元素相比，图像变得不对齐，尽管有相同的 css

Question

我有一个 div .pets，里面有几个图像和 div。 pet 类的 css 应用于 img 和 div，但图像变得不对齐，如图所示: 这是我的 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>

还有宠物和宠物的CSS:

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

如何使图像与 div 对齐？

Answer 1

因为你已经给了 display: inline-block; 也添加了 vertical-align:

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

默认为vertical-align: baseline;。这就是原因。

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