大衆單位不垂直以響應頁面爲中心

我創建了一個響應頁面，我使用大衆單位來縮放與拇指翻轉標題疊加字體。大衆單位不垂直以響應頁面爲中心

http://toddheymandirector.com/reel/indextest.html

第一縮略圖（NIKE）是字體臨時滯留。其他人爲.png用於測試目的。我可以得到.png翻轉到垂直中心，但不是字體。好像這將是簡單

.thumb-title-container 
{ 
height:10vw; 
width: 100%; 
position: absolute; 
top: -25vw; 
left: 0px; 
} overlays

來源

2014-12-19 REELHERO

使用視口寬度（vw）來設置東西的高度看起來像不好的做法。 – Slime

爲什麼它練習粘液是不好的？ – REELHERO

我使用transform屬性時，我試圖垂直中心的東西，因爲它更一致，更容易使用響應的網頁。下面是它會是什麼樣子：

HTML

<div id="parent"> 
    <div id="centered-child"> 
    <p>Some text</p> 
    </div> 
</div>

CSS

#parent { 
    height:300px; 
    width:300px; 
    background-color:rgba(110,110,110,0.85) 
} 
#centered-child { 
    text-align:center; 
    position:relative; 
    margin:0 auto; 
    top:50%; 
    translateY(-50%); /* There are also browser-specific calls for the translate property */ 
    background-color:rgba(225,225,225,0.75); 
}

孩子div可以容納任何你想要的，所以你仍然可以用一個PNG覆蓋，如果這就是你寧願做什麼。相對定位還會使子div居中，因爲主包裝隨瀏覽器大小縮小。使用媒體查詢確保小屏幕上的所有內容都保持良好。

這裏是一個demo pen你可以測試出來。

來源

2014-12-19 19:30:32 Brian

感謝布賴恩 - 我最初使用了一個.png覆蓋，因爲這個原因，但我發現vw單位縮放字體和使用網頁字體看起來比png更清晰，並在更清晰的顯示器上呈現更好 - 但這種覆蓋動畫開啓和關閉 - 並且工作正常對於PNG，但調整屬性似乎更有限的字體方法..你嘗試鏈接？ – REELHERO

我做到了，看起來不錯。我會說，像上面提到的那樣使用'div'並使用'font-size'來縮放字體，並且它會保持乾淨整潔。 – Brian

它將中心http://toddheymandirector.com/reel/，但當瀏覽器窗口縮放（伸展您的瀏覽器窗口向上或向下 - 居中換檔）時，居中換檔我嘗試使用百分比，vw等。 – REELHERO

大衆單位不垂直以響應頁面爲中心

回答

相關問題