顯示問題CSS

下面是一個JSFiddle的鏈接。我遇到了麻煩，因爲site-wrap div的起始處有一個文字圖像，名稱爲background-image，text位於該div內。顯示問題CSS

如果我將line-height添加到text div，則會調整高度以適合該高度，但是我只是希望將整頁高度和寬度添加到div並將文本居中。

任何幫助深表感謝。

2016-09-17 Jesse

您是否希望顯示圖像，以便在菜單超鏈接之間製作完整的靜態橫幅？它會像菜單一樣滾動頁面的其餘部分嗎？假設是，重構HTML會更加明智，這樣div就在'menu-1-left'和'menu-1-right'之間。另外，假設橫幅純粹是「聯繫我們」，那麼將文本實際繪製到圖像本身可能會更簡單。 –

感謝您的回覆黑曜石。我實際上正在尋找它更多的頁面「標題」，因爲它不會是靜態/固定的。相反，它會滾動頁面的內容在'網站包裝' 哦，菜單項之間的空白是標誌的意思。 – Jesse

我還沒有完全理解這個問題，對不起。所以問題是你需要確保'聯繫我們'文本保持垂直居中取決於圖像的大小？一種方法是將'display：table'應用於'background-image'，並將'display：table-cell'和'vertical-align：middle'應用於'text'。同時從'text'中刪除'height'和'line-height'。這將確保文本總是垂直居中，但請注意，由於當前的HTML結構，「background-image」需要從「top-bar」偏移。 –

您措辭你的問題的方式是有點混亂，但我相信你正在尋找：

width:100vw; 
height:100vh;

大衆是視口的寬度和VH是視高度。

來源

2016-09-17 01:36:43 Derek

我一直堅持這幾天，甚至沒有想到使用視口值。天才！ – Jesse

回答

相關問題