XHTMLforum - Inhalt von Block-Elementen vertikal ausrichten

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

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Inhalt von Block-Elementen vertikal ausrichten (http://xhtmlforum.de/showthread.php?t=36186)

Inhalt von Block-Elementen vertikal ausrichten

Hallo zusammen,

mir stellt sich folgendes Problem:
Ich möchte einen Link erstellen, welcher eine Höhe von 100% hat.
Nun soll der Linktext in dem Block-Element vertikal ausgerichtet werden (vertikal zentrieren).
Da die Höhe des Links variiert, kann ich dieses Problem nicht mit einem Padding lösen.
Leider funktioniert »vertical-align:middle« nur in Inline-Elementen und damit ich dem Link eine Höhe von 100% geben kann, muss ich diesen als »display:block« setzen.
Hier ein Beispiel, wo der Text noch vertikal ausgerichtet werden soll:
http://www.pro66.de/test/block_link.htm

Hier der entsprechende Code:

Code:

<style type="text/css">

BODY {

        padding: 20px;

        font-family: Arial, Helvetica, sans-serif;

        font-size: 12px;

        color: #000;

}

TABLE {

        width: 300px;

        height: 100px;

        margin: 0;

        padding: 0;

        border: 0;

}

TD {

        width: 100%;

        height: 100%;

}

A {

        display: block;

        width: 100%;

        height: 100%;

        padding-left: 10px;

        text-decoration: underline;

        font-weight: bold;

        color: #000;

}

A:hover {

        background-color: #7992B9;

        color: #FFF;

}

</style>

<table cellspacing="0">

        <tr>

                <td>Test Link</td>

        </tr>

</table>

Vielen Dank
Gruß
Eks

Benutze mal die Suchfunktion des Forums oder scroll einfach ein bisschen runter. Dieses Thema ist gerade in den letzen Tagen öfters besprochen worden.

Robin

Leider habe ich in der Suche nicht gefunden, außer Tipps mit »line-height«, die mir nichts bringen, da die Höhe 100% betragen soll, da sie variiert.
Mit einer »line-height« würde ich mich ja wie mit dem »padding« wieder festlegen, da das »line-height« ja nicht automatisch so hoch wird, wie die Zelle, in welcher der Link steht.

Ich suche also nur eine »vertical-align«-Lösung für Block-Elemente!

Gruß
Eks

Helfen die Links unter http://www.xhtmlforum.de/viewtopic.php?t=4924 nicht weiter?

Ansonsten gilt bei CSS: Es gibt keine eingebaute Standard-Möglichkeit Elemente vertikal zu zentrieren, man kann nur durch diverse "Tricks" es so aus sehen als ob. Gerade bei Elementen dessen Höhe nicht bekannt ist, ist es äußerst schwierig.

Im Zweifelsfall gibt es immer die (alte) Möglichkeit eine einzellige Tabelle zu verwenden. Das ist ja "nur" strukturell unsauber, hat aber keine Zugänglichkeitsprobleme.

Oder wenn Dir der IE nicht so wichtig ist: Dem umgebenden Element "display: table-cell" geben und dann "funktioniert" auch vertical-align. Dem IE könnte man dann z.B. mit JavaScript und einem Expression auf die Sprünge helfen...

EDIT: Eine Google-Suche hat folgens zutage gebracht: http://www.jakpsatweb.cz/css/css-ver...-solution.html

Robin

Das mit dem »table-cell« ist ne gute Idee. Für den IE funktioniert ja »inline-block«. Das hat den selben Effekt. Dann bräuchte ich halt nur zwei verschiedene Stylesheets.
Vielen Dank nochmal.

Gruß
Eks

Zitat:

Zitat von Eks

Für den IE funktioniert ja »inline-block«.

Seit wann? In welcher Version des IE? Habe ich etwas verpasst?

:shock:

.

Zitat:

Zitat von ulle

Zitat:

Zitat von Eks

Für den IE funktioniert ja »inline-block«.

Seit wann? In welcher Version des IE? Habe ich etwas verpasst?

Seit 5.5: http://msdn.microsoft.com/workshop/a...es/display.asp

Aber ich habe mich noch nicht näher damit beschäftigt, deshalb kann ich nicht sagen warum vertical-align darin "funktioniert", obwohl es nicht sollte...

Robin

Zitat:

Zitat von RoToRa

Aber ich habe mich noch nicht näher damit beschäftigt, deshalb kann ich nicht sagen warum vertical-align darin "funktioniert", obwohl es nicht sollte...

Also bei mir funktioniert nichts dergleichen im IE6, hast Du ein Beispiel wie es bei Dir funktioniert......