nicht angemeldet
Moin!
In meiner Tabelle in im <TD> ohne mein zutun der Inhalt (sowohl Bilder als auch Text!) in der mitte von oben nach unten gesehen.
Landläufig auch als "vertikal zentriert" bezeichnet. :)
Das wollte ich nun nach oben-links bringen (text und Bilder) und dachte an:
vertical-align:top;
text-align:center;
Wunderbar. So würde ich es auch machen.
aber in diesem Forenbeitrag sind Standards von W3 kopiert,
und die besagen dass das ausschliesslich(!) für BLOCK-Elemente gilt.
Wer sagt denn sowas?
Da draengen sich mir 3 Fragen auf.
- Wenn text-align eh für Blockelemente gilt,
wieso braucht man dass
margin-left:auto; margin-right:auto;
um ein Block-Element zu zentrieren wenn es es auch im drüberliegenden Element mit text-align gegen WÜRDE??
text-align wirkt auf Inline-Elemente, nicht auf Block-Elemente. Obwohl der IE es tatsächlich so macht, wie du es hypothetisch formuliert hast, ist es _falsch_ und wird zum Glück auch von keinem anderen Browser gemacht. So ist halt der Standard. Schließlich sind Blockelemente eigentlich nur in Ausnahmefällen reiner _Text_, häufiger ist, dass es sich um Bilder, <object> oder komplexe Gebilde handelt, die man nicht mit _text_-align ausrichten sollte.
- Wenn text-align für BLOCK Elemente ist,
ja wie soll ich denn dann Text nach links/rechts bekommen???
text-align richtet keine Blockelemente aus, sondern nur Inline-Elemente. Du kannst also text-align einem Block-Element zuweisen, die direkt enthaltenen Textelemente werden ausgerichtet.
- vertical-align ist ja laut W3 für Inline-Elemente.
Wie soll ich dann den doofen Text und das Bild nach oben bekommen??
vertical-align gilt auch für Tabellenzellen.
Generell sind Tabellen grundsätzlich anders als normale Block-Elemente. Es gelten hier andere Regeln, was die Ausrichtung angeht. vertical-align arbeitet anders, es richtet den Zelleninhalt nämlich in der gesamten Zelle aus, nicht nur auf der Textzeile, wie es außerhalb von Tabellenzellen geschieht.
Siehe dazu auch das Diagramm bei http://www.w3.org/TR/CSS2/tables.html#height-layout.
Und die horizontale Ausrichtung ist in http://www.w3.org/TR/CSS2/tables.html#column-alignment beschrieben.
Hier sind Auszüge auch MadGuards Posting der W3 Standards zitiert:
Siehe http://www.w3.org/TR/REC-CSS2/text.html#propdef-text-align
'text-align'
Value: left | right | center | justify | <string> | inherit
Initial: depends on user agent and writing direction
Applies to: block-level elements
Inherited: yes
Percentages: N/A
Media: visual
Das steht auf der allgemeinen Seite "Text" in Kapitel 16. Mein Link geht zur Seite "Tabellen" in Kapitel 17. Außerdem ist eine Tabellenzelle eine besondere Form eines Block-Elements.
Siehe http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-vertical-align
'vertical-align'
Value: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
Initial: baseline
Applies to: inline-level and 'table-cell' elements
Inherited: no
Percentages: refer to the 'line-height' of the element itself
Media: visual
Hier ist etwas weiter unten der (bei mir grün, fett und kursiv dargestellte) Satz wichtig: "Note. Values of this property have slightly different meanings in the context of tables. Please consult the section on table height algorithms for details."
Den Link zu den table height algorithms hab' ich oben gegeben.
- Sven Rautenberg
"Bei einer Geschichte gibt es immer vier Seiten: Deine Seite, ihre Seite, die Wahrheit und das, was wirklich passiert ist." (Rousseau)