如何在背景圖像上垂直排列文字？

我試圖在人們將鼠標放在該圖像上時，在圖像上覆蓋帶有白色半透明背景的文本。我在這裏找到了包含以下代碼的原始類型的答案。現在我想垂直對齊圖像中間的文字。如何在背景圖像上垂直排列文字？

可能嗎？

HTML：

<div class="image"> 
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" /> 
</div>

CSS：

.image { 
    position:relative; 
    width:400px; 
    height:400px; 
} 
.image img { 
    width:100%; 
    vertical-align:top; 
} 
.image:after { 
    content: 'Hello'; 
    color: #000000; 
    vertical-align: middle; 
    text-align: center; 
    position: absolute; 
    width:100%; 
    height:100%; 
    top:0; 
    left:0; 
    background: rgba(255,255,255,0.7); 
    opacity:0; 
    transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
} 
.image:hover:after { 
    opacity:1; 
}

來源

2014-12-22 YEON.JAE

我使用的顯示屬性已經，它並沒有@ YEON.JAE比工作 –

以供將來參考，也請注意，有時，當有人將問題的重複，有可能是一個有用的答案* *其他在相關問題上接受的答案。在這種情況下，餅乾鏈接中的第二個答案使用行高示例:-) – TylerH

如果圖像（或容器）您使用的高度是固定的，如在你的例子，則可以使用一個line-height方法，如下例所示：

.image:after { 
    line-height: 400px; 
}

將該行添加到.image:after選擇器，它會實現你想要的。

JSFiddle Example

來源

2014-12-22 18:35:48 TylerH

謝謝。我可以再問一個嗎？如果高度不固定，是不是可以呢？ –

@ YEON.JAE我不知道 – TylerH

好吧。謝謝！ –

這更確定和構造清潔的空間。

.image:after { 
    line-height: 400px; 
    margin: 0; 
    padding: 0; 
}

來源

2014-12-22 18:41:52 supportsp

如何在背景圖像上垂直排列文字？

回答

相關問題