vertical-align & text-align (Block/Inline) ??

[Hans Watzinger (Aqua)]

Hallo :)

Es quaelt mich was....

Und Zwar hab mir da MudGuard was aus W3 kopiert in seinem Forenbeitrag und das macht keinen Sinn...
In meiner Tabelle in im <TD> ohne mein zutun der Inhalt (sowohl Bilder als auch Text!) in der mitte von oben nach unten gesehen.

Das wollte ich nun nach oben-links bringen (text und Bilder) und dachte an:
vertical-align:top;
text-align:center;
aber in diesem Forenbeitrag sind Standards von W3 kopiert,
und die besagen dass das ausschliesslich(!) für BLOCK-Elemente gilt.

Da draengen sich mir 3 Fragen auf.

1. 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??

2. Wenn text-align für BLOCK Elemente ist,
      ja wie soll ich denn dann Text nach links/rechts bekommen???

3. vertical-align  ist ja laut W3 für Inline-Elemente.
      Wie soll ich dann den doofen Text und das Bild nach oben bekommen??

Hier etwas Pseudo-Code was mein Problem ist:

<table>
   <tr>
   <td>

Hier sind die Bilder und der Text und die sind alle in der Mitte von oben nach unten gesehen und auch nicht ganz links :(

</td>
   </tr>
   </table>

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

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

Velen Dank!
Aquariophile

[Bio]

Sup!

Ich würde mal behaupten, ein inline-Element kann schon deshalb nicht nach rechts oder links geschoben werden, weil es inline ist, d.h. im Fließtext steckt, also hinter und vor sich anderen Inhalt hat, weshalb es nicht weiter nach links oder rechts geschoben werden kann, da seine Position implizit dadurch feststeht, wo beim "Ausschütten des Textes hinrutscht", bildlich gesprochen. Ich bin mir fast sicher, wenn man genau darüber nachdenkt, dann kommt man darauf, warum für die entsprechenden Elemente nur diese oder jene Möglichkeiten existieren.

Gruesse,

Bio

[Sven Rautenberg]

Moin!

Ich würde mal behaupten, ein inline-Element kann schon deshalb nicht nach rechts oder links geschoben werden, weil es inline ist, d.h. im Fließtext steckt, also hinter und vor sich anderen Inhalt hat, weshalb es nicht weiter nach links oder rechts geschoben werden kann, da seine Position implizit dadurch feststeht, wo beim "Ausschütten des Textes hinrutscht", bildlich gesprochen.

Die Möglichkeiten, Text linksbündig, rechtsbündig, zentriert oder im Blocksatz anzuordnen, sind dir aber wohl doch bekannt, oder? :)

Ich bin mir fast sicher, wenn man genau darüber nachdenkt, dann kommt man darauf, warum für die entsprechenden Elemente nur diese oder jene Möglichkeiten existieren.

In der Tat dürfte es unmöglich sein, ein einzelnes Wort an den linken oder rechten Rand zu verschieben. Das ist hier aber auch gar nicht gefordert. Es geht um den Text insgesamt.

- Sven Rautenberg

[Sven Rautenberg]

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.

1. 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.

2. 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.

3. 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

[MudGuard]

Hi,

Und Zwar hab mir da MudGuard was aus W3 kopiert in seinem Forenbeitrag und das macht keinen Sinn...

Wieso machst Du einen neuen Thread auf? Diese Nachfrage gehört in den alten Thread.
"Sinn machen" ist sowieso falsch. Im Englischen heißt es zwar "to make sense", aber im Deutschen immer noch "Sinn haben". Auch wenn es viele falsch machen, wird es nicht richtiger.

In meiner Tabelle in im <TD> ohne mein zutun der Inhalt (sowohl Bilder als auch Text!) in der mitte von oben nach unten gesehen.
Das wollte ich nun nach oben-links bringen (text und Bilder) und dachte an:
vertical-align:top;
text-align:center;
aber in diesem Forenbeitrag sind Standards von W3 kopiert,
und die besagen dass das ausschliesslich(!) für BLOCK-Elemente gilt.

Welchen Sinn hätte text-align in einem inline-Element?
Für inline-Elemente kann keine Breite angegeben werden, sie sind immer so breit wie es der Inhalt erfordert. Es ist also kein Platz da, um den Text bei text-align:left nach links, bei text-align:right; nach rechts usw. verschoben werden könnte.

Abgesehen davon ist vertical-align gerade NICHT für block-level-Elemente definiert, sondern für inline-Elemente und table-cell-Elemente.
Wofür antworte ich Dir eigentlich, wenn Du noch nichtmal die Antwort liest?

Und Du widersprichst Dir in Deinen Aussagen. Du willst den Inhalt nach oben-links bringen, gibst aber top und center an...

1. 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??

Hättest Du vielleicht mal an die zitierte Stelle geschaut und einen Satz weiter gelesen, wüßtest Du bereits, daß das eben nicht gehen würde:

This property describes how inline content of a block is aligned. Values have the following meanings:
                            ^^^^^^

2. Wenn text-align für BLOCK Elemente ist,
      ja wie soll ich denn dann Text nach links/rechts bekommen???

indem Du im block-Element text-align:left; bzw. text-align:right; angibst.

3. vertical-align  ist ja laut W3 für Inline-Elemente.
      Wie soll ich dann den doofen Text und das Bild nach oben bekommen??

Wie gesagt, LESEN. Indem Du in der td vertical-align:top; angibst.
vertical-align ist ja auch für table-cell definiert.

Hier sind Auszüge auch MadGuards Posting der W3 Standards zitiert:

MudGuard, nicht MadGuard. Ich bin doch nicht verrückt. Unterlasse bitte solche Beleidigungen.

cu,
Andreas