HTML: Vertikale Ausrichtung

Seite 1 von 1 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/html_vertikale_ausrichtung_128464/page_1 - zur Vollversion wechseln!

DJ_Cyberdance schrieb am 31.10.2004 um 13:16

Hallo!
Möchte diverse Objekte in einem Layer auch vertikal zentrieren. Die Inhalte der Layer sind dynamisch, dh. ich weiß nicht, wie hoch sie sind und kann daher keine absoluten Angaben verwenden. zB:

<div style='position: absolute; ....'>
<div style='vertical-align: middle;...'>
</div>
</div>

das gleiche beim Ausrichten von Bildern:
<div style='...>
<img style='... />
</div>

"vertical-align" wird scheinbar nur bei Tabellen richtig interpretiert, nicht aber bei Divs. Weiß jemand, wie man sowas richtig macht?

Rektal schrieb am 31.10.2004 um 13:59

Links:
http://www.student.oulu.fi/~laurirai/www/css/middle/
http://www.wpdfd.com/editorial/wpd0103.htm#toptip

Obs wirklich X-Browser funktioniert -> selbst testen.

Ist so ziemlich eins der problematischsten Dinge.

Am intuitivsten waere <div style="display: table-cell; vertical-align: middle;"> , geht aber im IE nicht, somit unbrauchbar.

Bei neuen erkenntnissen bitte mitteilen

HTH

DJ_Cyberdance schrieb am 31.10.2004 um 14:08

Zitat von Rektal
Ist so ziemlich eins der problematischsten Dinge.

Ich weiß, aber ich kann beim besten Willen nicht verstehen, warum. Vertikale Ausrichtung ist doch nicht viel schwerer zu implementieren als horizontale. Irgendwie hat man sich da beim Erarbeiten von Standards keine Gedanken gemacht.

Danke jedenfalls für Deine Hinweise, werd mich da mal umsehen!

Rektal schrieb am 31.10.2004 um 14:13

Ich hab mit "problematisch" die Brower-Implementierungen gemeint. vertical-align auf ein block/inline Element ist halt was anderes als in einem table-cell Element. Es geht nicht darum, dass es "schwerer" ist, sondern es macht was anderes.

Wie gesagt, wenn du einem beliebigen Element sagen koenntest, sein eine table-cell mit dem dislpay Attribut, dann ists nicht "schwer". Da duerfen wir uns bei den IE-Entwicklern bedanken, dass sich das nicht implementiert haben.

Eine TR (table-row) im IE z.B. ein block-Element. Das ist einfach nur krank, spec violating und unbrauchbar in der Praxis.

DJ_Cyberdance schrieb am 31.10.2004 um 16:03

Full ack. Hab das Problem jetzt gelöst, is aber irgendwie gepfuscht:

<table style='border-style: none;'>
<tr>
<td style='width: 80px; height: 80px; text-align: center; vertical-align: middle;'>
<img...>
</td>
</tr>
</table>

Das geht, weil ich weiß, daß die Bilder auf jeden Fall kleiner als 80 x 80px sind. So sind sie schön ausgerichtet. Aber extra eine Tabelle anlegen is schon ziemlich krank :bash:

Rektal schrieb am 31.10.2004 um 16:17

Hast du dir http://www.student.oulu.fi/~laurirai/www/css/middle/ angesehen, wuerde das nicht eh' vielleicht funktionieren?

Was ich mir schon ueberlegt habe: dass man fuern IE ein eigenes CSS nimmt, dass irgendwelche Hacks macht damits hinhaut, und die anderen Browser verwenden display: table-cell. Man muesste halt schauen, wie gut die dass koennen. Afaik Gecko & Opera -> kein Problem. Aber Safari & Mac IE.

Gute Infos gibts immer unter PKKs http://quirksmode.org/ -> http://www.quirksmode.org/css/display.html

watchout schrieb am 31.10.2004 um 21:23

ah, jungs...
a: das thema gabs scho x-mal, einfach mal die forumssuche verwenden :rolleyes:
b: laut der css-spec (2.0 - Das was IE6 halbwegs kann) gibt es kein attribut vartical-align für block-level elemente...