我一直在試圖覆蓋播放圖標添加到我的影片,所有加入該即時通訊讓我的圖片的底部行一個奇怪的1px的間隔之後然而工作怪異圖片間距絕對定位導致由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;
}
問題尋求幫助調試( 「?爲什麼不是這個代碼工作」)必須包括所期望的行爲,一具體問題或錯誤以及在問題本身**中重現**所需的最短代碼。儘管您已經提供了一個示例鏈接,但如果鏈接無效,那麼您的問題對於其他未來具有相同問題的SO用戶將沒有任何價值。 –
添加上面的代碼 – RandomMath