html - 当 div 内的图像水平和垂直居中时，边距有问题(元素有问题)

Question

我有 2 张图片彼此下方。我希望它们在父 div 内水平和垂直居中显示。问题是第二个元素不适合父 div。

这就是我想要的:

这就是我现在拥有的:

这是我正在使用的代码:

HTML:

<div id="slika">
    <img src="images/elementi/EXTRA_SNIZENO.png" width="auto" height="15" alt="EXTRA"> 
        <br>
    <div class="img-wrapper">
        <img src="r/images/ideafissa_1.png"  width="auto" height="auto" alt="papirnatirucnik.jpg">
        </div>
    </div>

CSS

#slika {
border: solid 2px;
display: table;
float: left;
height: 126px;
width: 111px;
text-align: center;
vertical-align: middle;
}
.img-wrapper {
display: table-cell;
vertical-align: middle;
}
img {
max-width: 100%;
}

jsFiddle:HERE

Answer 1

您需要将其设为 position: absolute; 以使其脱离文档流。容器 #silka 需要设置为 position: relative; 以确保图像相对于它而不是视口(viewport)定位。

#slika {
    position: relative;
    border: solid 2px;
    display: table;
    float: left;
    height: 126px;
    width: 111px;
    text-align: center;
    vertical-align: middle;
}
.img-wrapper {
    display: table-cell;
    vertical-align: middle;
}
.topImage {
    position: absolute;
    left: 0;
    top: 0;
}
img {
    max-width: 100%;
}

<div id="slika">
    <img src="http://tommyvirtualnikatalog.com.hr/images/elementi/EXTRA_SNIZENO.png" width="auto" height="15" alt="EXTRA" class="topImage"/>
    <br>
    <div class="img-wrapper">
        <img src="http://tommyvirtualnikatalog.com.hr/images/akcija/neprehrana/1796_muska-carapa-ideafissa_1.png" width="auto" height="auto" alt="papirnatirucnik.jpg"/>
    </div>
</div>

JS fiddle : http://jsfiddle.net/k84mgLnt/