Text vertikal/horizontal zentrieren - tricky ;)

[boerner86]

Moin Leute,

ich versuche einen Text vertical/horizontal zu zentrieren.
Warum funktioniert text-align:center; in Verbindung mit display:table-cell; vertical-align:middle; hier nicht?

Link: http://jsfiddle.net/LYyST/3/

P.s: .aspectratio dient dazu, den Container in Breite/Höhe variabel zu halten. demnach darf keine Absoluthöhe für den Container angegeben werden ;)

Vielen Dank für eure Hilfe!

boerner

[MudGuard]

Hi,

Moin Leute,

ich versuche einen Text vertical/horizontal zu zentrieren.
Warum funktioniert text-align:center; in Verbindung mit display:table-cell; vertical-align:middle; hier nicht?

<span><h3>Überschrift</h3><p>Es folgt Text. Es folgt Text. Es folgt Text.</p></span>

Dein span ist leer.
span als inline-Element kann keine block-Elemente (z.B. h3, p) enthalten, wird also vor dem ersten block-Element implizit geschlossen. *)
Kommt also das hier raus:

<span></span><h3>Überschrift</h3><p>Es folgt Text. Es folgt Text. Es folgt Text.</p>

Also greift auch display: table-cell des span nicht auf h3/p.

*) in HTML 4.01. Wie's in HTML5 ist, weiß ich nicht.

cu,
Andreas

[molily]

Hallo,

span als inline-Element kann keine block-Elemente (z.B. h3, p) enthalten, wird also vor dem ersten block-Element implizit geschlossen. *)

*) in HTML 4.01. Wie's in HTML5 ist, weiß ich nicht.

Alle heutigen Browser verwenden einen HTML5-konformen Parser, und der erlaubt diese Verschachtelung. Das DOM sieht also so aus, wie man es naiv erwarten würde:

span
  |-- h3
  |   -- Überschrift
  |
  -- p
      -- Es folgt Text. …

Grüße,
Mathias

[molily]

Hallo,

Die anonyme table-Box, die erzeugt wird, ist halt nicht so groß wie dein Element, sondern nur so groß wie der Inhalt.

Im Prinzip könntest du dem absolut positionierten Element .refinfo die Eigenschaft display: table geben, aber dann wirkt top: 0 und bottom: 0 nicht mehr in der gewünschten Weise – das Element wird nicht mehr so groß gezogen wie das Bezugselement.

Da bei dir kein Element eine explizite Höhe hat, wird es schwierig. Ich würde versuchen, ein weiteres Element in .refinfo einzufügen, welches display: table und width/height: 100% bekommt.

http://jsfiddle.net/LYyST/4/

Im Übrigen lassen sich solche Animationen sehr schön mit CSS-Transformationen oder -Animationen umsetzen. JavaScript ist dazu oftmals nicht nötig.

Grüße,
Mathias

[JürgenB]

Hallo boerner86,

hier mal als Anregung meine Version zum h/v-zentrieren ohne Höhen- oder Breitenangabe:

http://www.j-berkemeier.de/GPXViewer/ShowGPX.html

Klick mal auf "Parameter ändern". Im Quelltext ist es das Element mit der ID "inp-feld".

Gruß, Jürgen