代码
<div class="test">
</div>
.test {
border: 1px solid #1aad19;
img {
width: 60px;
height: 60px;
}
}
效果如下，外层div并没有完全包住里面的img
image.png
方法一：将img设置为block
.test {
border: 1px solid #1aad19;
img {
width: 60px;
height: 60px;
display: block;
margin: 0 auto;
}
}
image.png
方法二：将img的vertical-align设置为middle或top
.test {
border: 1px solid #1aad19;
text-align: center;
img {
width: 60px;
height: 60px;
vertical-align: middle;
}
}
image.png
方法三：外层div设为flex
.test {
border: 1px solid #1aad19;
display: flex;
justify-content: center;
img {
width: 60px;
height: 60px;
}
}
image.png
