当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;，以确保图像相对于其定位而不是视口。

#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小提琴：http://jsfiddle.net/k84mgLnt/