Vertikales ausrichten mit der transform: translateY(-50%); in absolut positionierten div

Ich versuche, die vertikal-Zentrum a h2 innerhalb eines div das absolut positioniert mit einer Höhe von 50% mit dem folgenden code:

#owl-demo h2 {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Funktioniert in Chrome, aber der h2 verschwindet in Safari IOS, es sei denn, ich habe die h2 zu werden absolute positioniert und dann kann ich Sie nicht, passen Sie den text mit text-align.

Jede Hilfe viel geschätzt, ich habe versucht, diese Arbeit zu machen den ganzen Tag.

Edit: So wie es aussieht ist die Höhe 50% ist das problem auf das parent-div, wenn ich es entfernen, erscheint der text in IOS.
Ich bin versucht zu erreichen, ein overlay, das deckt 50% der thumbnail-Höhe gibt es einen anderen Weg um es zu decken 50% der Miniaturansicht?

#owl-demo  .thumb-overlay {
    text-align: center;
    height: 50%;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
background:rgba(0, 0, 0, .8);
z-index: 9999;
opacity:0;
    filter: alpha(opacity = 0);
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}

#owl-demo  .thumb-overlay:hover {
    opacity:0.75;
    filter: alpha(opacity = 75);
    transition:opacity 0.25s;
    -moz-transition:opacity 0.25s;
    -webkit-transition:opacity 0.25s;
}

.touch #owl-demo  .thumb-overlay,  {
    opacity:1;
    filter: alpha(opacity = 1);
}

#owl-demo h2 {
font-size: .875em;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    color: $white;
}

Jsfiddle bitte
HTML und CSS: jsfiddle.net/5cn5s Sieht aus wie die Höhe ist, das Problem verursacht der Suche nach einem anderen Weg, um die Größe der überlagerung zu 50%, irgendwelche Ideen? jsfiddle.net/5cn5s
das fiddle ist nicht gut.. geben Sie einen anderen ein, ohne PHP in HTML
Sorry, hier gehen Sie: jsfiddle.net/5cn5s/10
-webkit-transform: translateY(-50%); fixed it for me, vielen Dank für diese

InformationsquelleAutor leanda | 2014-04-09

8

Folgende funktioniert bei mir im safari (5.1.7)
```
#owl-demo h2 {
 font-size: 1em;
 -webkit-transform: translateY(100%);
 -ms-transform: translateY(100%);
 transform: translateY(100%);
 color: white;
}
```
JSFiddle

Als für die anderen Wege, da können Sie Gebrauch machen von ::before pseudo-element für die Ausrichtung :
```
#owl-demo .thumb-overlay::before {
content:"";
display:block;
height:30%;
```
}

überprüfen Sie diese JSFiddle

Dass die Lösung nicht wirklich vertikal zentrieren den text.
überprüfen Sie die zweite.
Eigentlich mit den :vor dem element arbeitet ok auf eine einzige Zeile, aber nicht einen multi-line-Titel.
überprüfen Sie dann die erste jsfiddle.net/tilwinjoy/5cn5s/14
Das große problem ist, dass Sie mit <h2> was ist ein block-element, um die Browser anwenden von margin, padding etc, so dass die tatsächliche Größe des Blocks nicht, was Sie erwartet haben.. wenn Sie ein <span> <p> und Stil, es wird viel einfacher sein. plus die Frage war abt Befestigung das problem in safari, Sie sagte nie etwas über mehrzeilige.. 😉

InformationsquelleAutor T J
3

Ich habe eine Lösung gefunden, heute lösen Sie dieses Problem mit mobile safari & mobile chrome.

Verwenden Sie den gleichen code haben Sie bereits für die CSS-h2 in deinem Beispiel, nur setzen vertical-align:top;

Scheint dies zu beheben, translateY auf mobile Safari. Ich hoffe, das jemand hilft!

Wie funktioniert das??
Gute Frage... ich bin mir nicht sicher, würde gerne wissen wenn.

InformationsquelleAutor Joseph Astrahan
3
```
.selector {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}
```
dies funktioniert auf jedem browser
es wäre hilfreicher, wenn du auch einen link, um es arbeiten auf jsFiddle.net
Sie können Morgendämmerung zu flex-box alles, was Sie brauchen, ist festgelegt, dass ein Elternteil {display:flex} und Kind {margin:auto} auch hier ist kann ich verwenden, um die Unterstützung für Browser, die caniuse.com/#search=flex-box hoffe, es hilft

InformationsquelleAutor joko

Präfixe sollten den trick tun:

-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);

InformationsquelleAutor JerryC

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.