Worte und Texte verschiedener Länge horizontal zentrieren
Hans
- css
Hallo.
Ich habe eine Sammlung von Worten und Texten ganz verschiedener Länge in einer PHP-Datenbank, die ich zentriert auf einer Internetseite ausgeben möchte.
Da ich weiß, dass die horizontale UND vertikale Zentrierung mit CSS und ohne Tabellen ein Problem ist, fängt meine Frage mit dem einfachen Fall an: die Worte und Texte sollen nur in einer HORIZONTAL zentrierten Box erscheinen, die immer nur so groß aufgezogen werden soll, wie für den Text benötigt, aber maximal nicht größer als 600px. D.h.: ganz klein, wenn der Inhalt nur ein kurzes Wort ist, aber 600px breit, wenn der Text aus vielen vielen Worten besteht. Die sollen dann linksbündig umgebrochen werden. Geht das? Ich habe es bisher immer nur geschafft, eine feste Größe oder gar keine definierte Größe (d.h. vom linken bis zum rechten Seitenrand) zu erzeugen.
Kurze Worte waren dann nie genau zentriert, weil eben immer die Box um sie herum zentriert wurde, die ja eine feste Größe hatte, die Worte selbst aber am linken Rand der Box klebten (was ja bei langen, umgebrochenen Texte auch gewünscht ist).
Zweite Stufe, wenn das erste Problem gelöst ist:
Geht das ganze auch horizontal UND vertikal zentriert? Notfalls meinetwegen auch auf die unelegante Art mit Tabellen… . Aber bitte OHNE Javascript.
Hallo Hans
Da ich weiß, dass die horizontale UND vertikale Zentrierung mit CSS und ohne Tabellen ein Problem ist,
Dafür gibt es zwar Möglichkeiten, die allerdings nur funktionieren, wenn
die Größe des zu zentrierenden Elements bekannt ist.
Du müsstest also serverseitig die notwendige Größe der Box ermitteln. Das
dürfte allerdings kaum zuverlässig möglich sein.
fängt meine Frage mit dem einfachen Fall an: die Worte und Texte sollen nur in einer HORIZONTAL zentrierten Box erscheinen, die immer nur so groß aufgezogen werden soll, wie für den Text benötigt,
Das ist bereits ein Problem. Es gibt bisher keine CSS-Eigenschaften, die
dafür sorgen, dass ein Element als Block dargestellt wird, der sich der
Größe des Inhalts anpasst, außer float und display:table (table-...).
Nur verhindert float eine Zentrierung, und display:table wird vom IE nicht
unterstützt.
aber maximal nicht größer als 600px. D.h.: ganz klein, wenn der Inhalt nur ein kurzes Wort ist, aber 600px breit, wenn der Text aus vielen vielen Worten besteht. Die sollen dann linksbündig umgebrochen werden. Geht das?
Die Maximalbreite stellt kein Problem dar, wenn du dem Elternelement diese
Breite zuweist, dann wird es ohne Zwang (größere angegebene Breite,
unumbrechbarer Inhalt, white-space:nowrap) diese auch einhalten.
Du kannst deiner Box text-align:left geben, egal was für die Elternelemente
festgelegt ist.
Mir fällt also keine Lösung ein, ohne Tabellen dafür zu missbrauchen, wenn
es auch im IE funktionieren soll.
Geht das ganze auch horizontal UND vertikal zentriert? Notfalls meinetwegen auch auf die unelegante Art mit Tabellen… . Aber bitte OHNE Javascript.
Ja, mit Tabellen geht es.
Auf Wiederlesen
Detlef
Super, vielen Dank für Deine Hilfe, Detlef! Dann werde ich's so machen wie in Deinem Beispiel.
Lieben Gruß,
Hans