绝对定位导致由1px的

Question

我一直在试图覆盖播放图标添加到我的影片，所有加入该即时通讯让我的图片的底部行一个奇怪的1px的间隔之后然而工作怪异图片间距

当从（#icon）中删除绝对定位时，图像完美对齐 - 但是当添加回时，它会增加奇怪的间距

有人可以帮忙吗？

CODE：http://www.codeply.com/go/JC75OR4xpD

HTML代码：

<div class="instaVideos"> 
      <h1>Short Videos</h1> 

       <a href="http://scontent-lhr3-1.cdninstagram.com/hphotos-xaf1/t50.2886-16/11661388_407770589406910_367605487_n.mp4" class="html5lightbox"> 
        <img src="https://igcdn-photos-c-a.akamaihd.net/hphotos-ak-xaf1/t51.2885-15/11325016_1163164417043690_1908545167_n.jpg"/> 
        <img id="icon" src="img/youtubePlayIcon.png"/> 
       </a> 


       <a href="http://scontent-lhr3-1.cdninstagram.com/hphotos-xtp1/t50.2886-16/1489765_333969910114258_1680134671_n.mp4" class="html5lightbox"> 
        <img src="https://igcdn-photos-h-a.akamaihd.net/hphotos-ak-xfa1/t51.2885-15/10706968_6_1567865956_n.jpg"/> 
        <img id="icon" src="img/youtubePlayIcon.png"/> 

       </a> 

       <a href="http://scontent-lhr3-1.cdninstagram.com/hphotos-xaf1/t50.2886-16/10679292_519402934860781_468618633_n.mp4" class="html5lightbox"> 
        <img src="https://igcdn-photos-e-a.akamaihd.net/hphotos-ak-xaf1/t51.2885-15/10665576_441425795996740_1661178998_n.jpg"/> 
        <img id="icon" src="img/youtubePlayIcon.png"/> 

       </a> 

       <a href="http://scontent-lhr3-1.cdninstagram.com/hphotos-xfp1/t50.2886-16/10641919_684721938283340_2079757675_n.mp4" class="html5lightbox"> 
        <img src="https://igcdn-photos-g-a.akamaihd.net/hphotos-ak-xap1/t51.2885-15/924582_890120924350870_1658010424_n.jpg"/> 
        <img id="icon" src="img/youtubePlayIcon.png"/> 

       </a> 


       <a href="http://scontent-lhr3-1.cdninstagram.com/hphotos-xfp1/t50.2886-16/10541299_371884109631916_1548975081_n.mp4" class="html5lightbox"> 
        <img src="https://igcdn-photos-c-a.akamaihd.net/hphotos-ak-xpa1/t51.2885-15/10538735_664550930296554_1249448005_n.jpg"/> 
        <img id="icon" src="img/youtubePlayIcon.png"/> 

       </a> 

       <a href="https://scontent-lhr3-1.cdninstagram.com/hphotos-xaf1/t50.2886-16/11683107_112731029066100_1538573428_n.mp4" class="html5lightbox"> 
        <img src="https://igcdn-photos-e-a.akamaihd.net/hphotos-ak-xfa1/t51.2885-15/11386568_1455668744729300_108311835_n.jpg"/> 
        <img id="icon" src="img/youtubePlayIcon.png"/> 

       </a> 

       <a href="http://scontent-lhr3-1.cdninstagram.com/hphotos-xfp1/t50.2886-16/10721731_1471532036461241_1447645097_n.mp4" class="html5lightbox"> 
        <img src="https://igcdn-photos-h-a.akamaihd.net/hphotos-ak-xpa1/t51.2885-15/10724656_765518650158719_1752400817_n.jpg"/> 
        <img id="icon" src="img/youtubePlayIcon.png"/> 

       </a> 

       <a href="http://scontent-lhr3-1.cdninstagram.com/hphotos-xfa1/t50.2886-16/11679305_467034590127593_1579081935_n.mp4" class="html5lightbox"> 
        <img src="https://igcdn-photos-e-a.akamaihd.net/hphotos-ak-xaf1/t51.2885-15/11429736_699224963557660_1457167025_n.jpg"/> 
        <img id="icon" src="img/youtubePlayIcon.png"/> 

       </a> 

     </div> 

CSS：

.instaVideos { 
      margin:0 auto; 
      margin-left: auto; 
      margin-right: auto; 
      max-width: 800px; 
      width:90%; 
      text-align: center; 
      margin-bottom: 50px; 
      transition:all .2s ease-in-out; 

     } 


     .instaVideos > h1 { 
      margin:0 auto; 
      text-align: left; 
      width:300px; 
      margin-left: 2%; 
      font-size: 30px; 
      font-family: 'raleway'; 
     } 

     .instaVideos > a > img { 
      width:150px; 
      height:auto; 
      margin-top: 5px; 
      border:1px solid red; 
      text-align: center; 
     } 


     .instaVideos a:hover { 
      opacity: 0.7; 
     } 


     .instaVideos > a { 
      position:relative; 
     } 



     #icon { 
      width:auto; 
      height:30px; 
      position:absolute !important; 
      left:35%; 
      top:0px; 
      right:0px; 
      display:inline !important; 
     } 

通过执行follwi解决

我解决了这个问题NG：

.instaVideos { 
    position:relative; 
} 

#icon { 
position: absolute; 
left:0; 
right:0; 
top:0; 
margin: 0 auto; 
} 

Answer 1

也许这可以帮助您：Fiddle

CSS：

.instaVideos > a { 
     position: relative; 
     height: 100%; 
     width: auto; 
     display: inline-block; 
} 
#icon { 
    width:auto; 
    height:30px; 
    position:absolute !important; 
    left:50%; 
    top:50%; 
    transform: translate(-50%, -50%); 
}