VW-Einheiten, die nicht vertikal auf reaktionsschnelle Seiten zentrieren - css, responsive-design

Ich habe eine Responsive-Seite erstellt und verwende vw-Units, um die Fonts mit den Überlagerungen der Thumb Rollover-Titel zu skalieren.

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

Das erste Thumbnail (Nikes) ist ein Font Layover. die anderen sind .png für Testzwecke. Ich kann das .png zu einem vertikalen Mittelpunkt aber nicht der Schriftart wechseln. Scheint so, als wäre es einfach

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

Antworten:

Ich verwende das transform Eigenschaft, wenn ich versuche, etwas vertikal zu zentrieren, weil es in reaktionsfähigen Seiten konsistenter und einfacher zu verwenden ist. Hier ist, wie es aussehen würde:

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);
}

Das Kind div kann halten, was Sie wollen, so dass Sie immer noch ein PNG-Overlay verwenden können, wenn das "was Sie tun" eher tun. Relative Positionierung hält auch das Kind div zentriert, da der Hauptwrapper mit der Browsergröße schrumpft. Verwenden Sie Medienabfragen, um sicherzustellen, dass auf kleineren Bildschirmen alles schön bleibt.

Hier ist ein Demostift Sie können testen.