我有一个 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 对齐?
最佳答案
因为你已经给了 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>
关于html - 与 div 元素相比,图像变得不对齐,尽管有相同的 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45130667/