图像出现在其包含div的左侧

Question

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

.SmallImageContainer {
	float: left;
	width: 100%;
	min-height: 70px;
	margin-left: 0px;
	margin-top: 20px;
}

.SmallImageBox {
	float: left;
	height: 70px;
	width: 50px;
	background-color: pink;
	margin-right: 10px;
}

.SmallImageBox img {
	display: block;
	vertical-align: bottom;
	margin: auto;
	border: solid thin #787878;
	max-width: 90%;
}

    <div class="SmallImageContainer">
    <div class="SmallImageBox"><img id="sm001" src="http://placehold.it/80x80"></div>
    <div class="SmallImageBox"><img id="sm002" src="http://placehold.it/80x80"></div>
    <div class="SmallImageBox"><img id="sm003" src="http://placehold.it/80x80"></div>
    <div class="SmallImageBox"><img id="sm004" src="http://placehold.it/80x80"></div>
    <div class="SmallImageBox"><img id="sm005" src="http://placehold.it/80x80"></div>
    </div> <!-- class="SmallImageContainer" -->

Answer 1

使用max-width: 100%;代替90%（这会为您提供6px的保证金），并使用box-sizing: border-box;解决边框溢出问题（如果img不再有必要）没有边界。

并且，要垂直对齐图片，您可以先向其添加position: relative;，然后将其放在top: 50%;和margin-top: -50%;，然后您就可以了它，见：

＆＃13;

＆＃13;

.SmallImageContainer {
	float: left;
	width: 100%;
	min-height: 70px;
	margin-left: 0px;
	margin-top: 20px;
}

.SmallImageBox {
	float: left;
	height: 70px;
	width: 50px;
	background-color: pink;
	margin-right: 10px;
}

.SmallImageBox img {
	display: block;
	vertical-align: bottom;
	margin: auto;
	border: solid thin #787878;
	max-width: 100%;
	box-sizing: border-box;
	position: relative;
	top: 50%;
	margin-top: -50%;
}

＆＃13;

<div class="SmallImageContainer">
    <div class="SmallImageBox"><img id="sm001" src="http://placehold.it/80x80"></div>
    <div class="SmallImageBox"><img id="sm002" src="http://placehold.it/80x80"></div>
    <div class="SmallImageBox"><img id="sm003" src="http://placehold.it/80x80"></div>
    <div class="SmallImageBox"><img id="sm004" src="http://placehold.it/80x80"></div>
    <div class="SmallImageBox"><img id="sm005" src="http://placehold.it/80x80"></div>
    </div> <!-- class="SmallImageContainer" -->

＆＃13;

＆＃13;

＆＃13;