XHTMLforum - iFrame nicht vertikal mittig

XHTMLforum (http://xhtmlforum.de/index.php)

- Site- und Layoutcheck (http://xhtmlforum.de/forumdisplay.php?f=77)

- - iFrame nicht vertikal mittig (http://xhtmlforum.de/showthread.php?t=70692)

1000grad

26.02.2014 14:06

iFrame nicht vertikal mittig

Hallo,
ich hoffe ich bin hier in dieser Rubrik korrekt.

Es geht darum, dass ich unter folgender Seite: Projekt 1000 Grad.
ein iFrame-Video eingebunden habe, es aber nicht (vertikal) mittig zentriert bekomme.
Ich hatte es auch schon mit "valign=center" probiert, aber es scheint so, als ob ich etwas übersehe.
Ich wäre super dankbar, wenn mir jemand sagen könnte, was geändert werden muss.
Hier der Quelltext: http://pastebin.com/XHpzjbBg

Tausend Dank!

etux	26.02.2014 15:03

"CSS-Tabellen" wäre eine Lösung.
html bekommt „display: table“, body „display: table-cell“.
iframe bekommt „position: relative“ (wegen dem Hintergrundbild) und „display: inline-block“.
iframe (nach Außen jetzt ein inline-Element) wird horizontal mit „text-align: center“ und vertikal mit „vertikal-align: middle“ für body zentriert.
Das Hintergrundbild bleibt „absolute“ positioniert, ein „z-index“ ist nirgendwo nötig, aber „left“ und „top“ (auf 0) bei dem Bild.

etux	26.02.2014 15:07

Hier, wie ich das in etwa meine:

HTML-Code:

<!doctype html>

<meta charset="UTF-8">

<title>1000grad :: xhtmlforum.de</title>

<style>

html { display: table; width: 100%; height: 100%; }

body { display: table-cell; vertical-align: middle; text-align: center; }

img { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }

iframe { position: relative; display: inline-block; /*text-align: left;*/ }

</style>

<img src="http://www.projekt1000grad.de/background.jpg" alt="">

<iframe width="640" height="385" src="https://docs.google.com/file/d/0B_abwvRggwmCTUJwY2FtX2Noekk/preview"></iframe>

1000grad

26.02.2014 15:25

Juhu, super! Ich danke dir!
Nach deinem ersten Post war ich ein wenig aufgeschmissem und hatte noch en bisschen probiert - wäre aber in die Hose gegangen.

Echt toll, dass du eben noch den Code gepostet hast!

Danke!

etux	26.02.2014 15:34

Bitte, gern. :)

Alle Zeitangaben in WEZ +2. Es ist jetzt 06:43 Uhr.