其他元素的绝对定位导致奇怪的图像间距为 1px

Question

我一直在尝试为我的视频添加一个覆盖播放图标，但一切正常，但是在添加这个之后，我的图像底行出现了奇怪的 1px 间距

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

有人可以帮忙吗？

代码：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_601233316654119_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;
        }

已解决

我通过执行以下操作解决了这个问题：

.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%);
}

其他元素的绝对定位导致奇怪的图像间距为 1px

Absolute Positioning of other Element causes weird Image Spacing by 1px

html

css

css-position