保證金誤差和垂直取向上僞元件

Question

我的HTML代碼如下：

<article> 
    <picture> 
     <img src="a.png"> 
    </picture> 
</article 

此HTML代碼是遍佈的頁面，其中，所述IMG具有可變的寬度。這個想法是能夠懸停在img上，創建一個圖像懸停覆蓋與+上。我試圖用這個CSS：

article picture { position: relative; } 
article picture:before { background: rgba(0,0,0,.75); content: "+"; height: 100%; opacity: 0; position: absolute; transition: opacity .25s ease; width: 100%; } 
article picture:hover:before { opacity: 0.9; } 

它的工作，或多或少。我的覆蓋比我的img大，總是像10個像素，我該如何解決這個問題？而且我想在我的IMG中心「+」，我無法完成。 vertical-align: middle不起作用，line-height我不能使用，因爲img的大小是可變的。有任何想法嗎？

Answer 1

問題是，圖像管理像內嵌塊。你只需要使用display: block;。

article picture { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
img { 
 
    display: block; 
 
} 
 
article picture:before { 
 
    background: rgba(0, 0, 0, .75); 
 
    content: "+"; 
 
    height: 100%; 
 
    opacity: 0; 
 
    position: absolute; 
 
    text-align: center; 
 
    top: 0; 
 
    left: 0; 
 
    transition: opacity .25s ease; 
 
    width: 100%; 
 
} 
 
article picture:hover:before { 
 
    opacity: 0.9; 
 
}

<article> 
 
    <picture> 
 
    <img src="http://www.placehold.it/100x100"> 
 
    </picture> 
 
    </article

編輯：

這裏的另一種選擇我做你想要覆蓋：jsfiddle。