圖像與div項目相比變得不一致，儘管有相同的css

Question

我有一個div .pets，裏面有幾個圖像和div。類寵物的CSS被應用到IMG和格但圖像變得不對齊的圖像： 這裏是我的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>

Answer 2

讓您.pets imgdisplay: inline-block;

.pets img{ 
    display: inline-block; 
} 

如果不解決那麼你的問題，請使用vertical-align: middle;的建議我Paraveen。