同じcssにもかかわらず、divアイテムと比較して画像の位置がずれる

Question

div .petsに複数の画像とdivが含まれています。クラスのペットのためのCSSはIMGとdivの両方に適用されますが、画像は画像のようにずれなる：

.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 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：ここ 私のhtmlです

画像を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>

Answer 2

それは私のParaveenが提案されているようvertical-align: middle;を使用し、あなたの問題が解決しない場合は、あなたの.pets imgdisplay: inline-block;

.pets img{ 
    display: inline-block; 
} 

してください。