Html 显示在其包含div左侧的图像

我有一系列的div，每个div包含一个图像。图像（理想情况下）将在div内垂直和水平居中，但现在每个图像的左侧显示在包含div的最左侧边界的左侧约6个像素。如何使它们正确显示

.SmallImageContainer{
浮动：左；
宽度：100%；
最小高度：70px；
左边距：0px；
边缘顶部：20px；
}
.SmallImageBox{
浮动：左；
高度：70像素；
宽度：50px；
背景颜色：粉红色；
右边距：10px；
}
.SmallImageBox img{
显示：块；
垂直对齐：底部对齐；
保证金：自动；
边框：实心薄#787878；
最大宽度：90%；
}

---

使用

最大宽度：100%

而不是

90%

（这给了您6px的边距），并使用

框大小：border-box解决边界溢出问题（如果img没有边框，则不需要此代码）

并且，要垂直对齐图像，您可以首先添加一个
位置：relative到它，然后把它放在
顶部：50%和带
页边距顶部：-50%，您已经获得了它，请参见：


.SmallImageContainer{
浮动：左；
宽度：100%；
最小高度：70px；
左边距：0px；
边缘顶部：20px；
}
.SmallImageBox{
浮动：左；
高度：70像素；
宽度：50px；
背景颜色：粉红色；
右边距：10px；
}
.SmallImageBox img{
显示：块；
垂直对齐：底部对齐；
保证金：自动；
边框：实心薄#787878；
最大宽度：100%；
框大小：边框框；
位置：相对位置；
最高：50%；
利润率最高：-50%；
}

我已经用功能图像更新了您的问题。然而，我不认为有什么问题。请进行其他更新以演示问题。似乎没有任何问题吗？好的。我猜这意味着正在进行的CSS中有什么东西把它搞砸了。
框大小：border box
无法解决边界溢出问题。请注意，图像的计算宽度为
48px
。边框不会溢出父级
div
，因为您已经设置了
max width:100%
，而不是
width:100%
@matewka，即使使用
width:100%
，仍然需要
框大小：边框。顺便说一句，我用的是Chrome。你自己在检查员身上试试。