Агрегати VW, які не вертикально центровані на адаптивній сторінці, - CSS, responsive-design

Я створив чуйну сторінку і використовую vw-одиниці для масштабування шрифтів із накладеннями назви великого пальця.

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

Перша мініатюра (nike) - це пропуск шрифту. інші - .png для тестування. Я можу отримати .png для перекидання до вертикального центру, але не шрифту. Здається, це було б просто

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

Відповіді:

Я використовую 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 в центрі, коли основна обгортка стискається з розміром браузера. Використовуйте медіа-запити, щоб переконатися, що все залишається приємним на менших екранах.

Ось а демонстраційна ручка ви можете випробувати.