Frage zum Wiki-Artikel „Inhalte zentrieren“

[ThePi]

Hallo,

wie kann ich ein Div in der Mitte einer Seite ausrichten, den Inhalt im Div aber links ausgerichtet?

Grüße

[Gunnar Bittersmann]

@@ThePi

wie kann ich ein Div in der Mitte einer Seite ausrichten, den Inhalt im Div aber links ausgerichtet?

Mit Flexbox oder mit Grid – wie letztens erst gezeigt.

LLAP 🖖

[JürgenB]

Hallo,

oder mit translate.

Je nach Randbedingung kann man vw/vh auch durch % ersetzen und fixed durch absolute.

Gruß
Jürgen

[marctrix]

Hej JürgenB,

oder mit translate.

Je nach Randbedingung kann man vw/vh auch durch % ersetzen und fixed durch absolute.

"Randbedingungen" welch hinterlistiges Wortspiel im Zusammenhang mit translate und Zentrierung! >:->

Cool. Das geht wirklich!

Man kann zwar nicht alles lesen, aber das was man sehen kann sieht sehr schön aus!

Und für den Rest gibt es ja Screenreader! Die stören sich an so was nicht (1:0 für die Blinden!) 😉

Marc

[MudGuard]

Hi,

Man kann zwar nicht alles lesen, aber das was man sehen kann sieht sehr schön aus!

aber man kann immerhin erkennen, daß die Alliteration unnötig nicht bis zum Ende des Satzes reicht. "heraus" statt "raus", dann wär's vollständig alliteriert 😉

cu,
Andreas a/k/a MudGuard

[Tabellenkalk]

Hallo,

aber man kann immerhin erkennen, daß die Alliteration unnötig nicht bis zum Ende des Satzes reicht. "heraus" statt "raus", dann wär's vollständig alliteriert 😉

und mit „hinaus“ wirds imho noch schöner…

Gruß
Kalk

[JürgenB]

Hallo,

aber man kann immerhin erkennen, daß die Alliteration unnötig nicht bis zum Ende des Satzes reicht. "heraus" statt "raus", dann wär's vollständig alliteriert 😉

und mit „hinaus“ wirds imho noch schöner…

ich hatte den Spruch ja etwas frei in Erinnerung, aber das „raus“ war schon richtig:

http://sprueche.woxikon.de/zungenbrecher/1581-hinter-hermann-hannes-haus-haengen-hundert-hemden-raus-hundert-hemden-haengen-raus-hinter-hermann

Gruß
Jürgen

[Rolf B]

Hallo

geht nicht anders…

Hinter Hermanns Hinterhaus - tamta tamta tamtata
hingen hundert Hemden raus - tamta tamta tamta ta

„heraus“ oder „hinaus“ würden ein Extra-„ta“ einfügen und dann passt der Rhythmus nicht mehr. Ist leider ein Fehler, den man bei Möchtegern-Poeten ständig findet. Sie reimen, haben aber Rhythmusgefühl wie ein Elefant im Marula-Rausch...

Man müsste ein „h'naus“ draus machen, also 2 Silben in ein „ta“ komprimiern.

Rolf

[Gunnar Bittersmann]

@@Rolf B

… dann passt der Rhythmus nicht mehr. Ist leider ein Fehler, den man bei Möchtegern-Poeten ständig findet. Sie reimen, haben aber Rhythmusgefühl wie ein Elefant im Marula-Rausch...

Trotzdem tun sie’s – immer wieder. Wohl auch jetzt wieder, damit ihre Reime (AABBCCDD – um Himmels Willen nicht ABABCDCD, das überfordert das Volk) bis Februar fertig sind. Den Narren gefällt’s. Besonders denen im Rheinland. Aber das weißt du ja. 😉

LLAP 🖖

[JürgenB]

Hallo Marc,

wie hast du es geschafft, den Inhalt größer als die Box zu bekommen? Das fixe Positionierung das Scrollen verhindert, war mir klar, aber das Abschneiden habe ich noch nicht beobachtet.

Gruß
Jürgen

[marctrix]

Hej JürgenB,

wie hast du es geschafft, den Inhalt größer als die Box zu bekommen? Das fixe Positionierung das Scrollen verhindert, war mir klar, aber das Abschneiden habe ich noch nicht beobachtet.

Ich habe relativ große Schrift in einem relativ kleinen viewport eingestellt. Ich glaube in Firefox, jedenfalls unter Win 10.

Wobei in der Regel mehr Text in solchen Boxen stehen dürfte, so dass dieser Effekt unter sehr viel weniger widrigen Bedingungen auftritt.

Ach so: die Box ist nicht kleiner als ihr Inhalt. Die Box passt nur nicht mehr in den Viewport - habe den Screenshot schlecht geschnitten, daher ist das nicht so gut zu erkennen.

Was aber gut zu erkennen ist: ohne feste Breite hätte der gesamte Text locker in den viewport gepasst…

Marc

[JürgenB]

Hallo Marc,

der weiße Bereich unten hatte mich irritiert. OK, du hast die Schwäche der fixen Positionierung aufgedeckt.

Die Box hat übrigens keine feste Breite, ich habe nur ein paar <br> eingestreut, um zu zeigen, das der Text linksbündig ist.

Wie verhalten sich eigentlich die anderen vorgestellten Arten der Zentrierung, wenn im Body noch andere Elemente sind? Ich könnte jetzt die Nebenwirkungen von Grid oder Flexbox nicht abschätzen.

Gruß
Jürgen

[marctrix]

Hej JürgenB,

der weiße Bereich unten hatte mich irritiert. OK, du hast die Schwäche der fixen Positionierung aufgedeckt.

Das wäre ein Ding, wenn mir das erst jetzt gelungen wäre! 😀

Nein, das ist seit Anfang an klar und steht in den Tutorials für diese Technik immer mit drin, was dann auch gleich klar macht, wann diese Technik angewendet werden kann und wann nicht.

Die Box hat übrigens keine feste Breite, ich habe nur ein paar <br> eingestreut, um zu zeigen, das der Text linksbündig ist.

Ok. Aber genau das verhindert dann, dass der horizontal ausreichend vorhandene Platz nicht genutzt wird.

Damit hast du die Schwäche von <br> aufgezeigt 😉

Wie verhalten sich eigentlich die anderen vorgestellten Arten der Zentrierung, wenn im Body noch andere Elemente sind? Ich könnte jetzt die Nebenwirkungen von Grid oder Flexbox nicht abschätzen.

Flexbox und css Grid sind für genau solche Sachen gemacht. Daher funktionieren die auch prima.

Aber gegen das „Einstreuen von <br>“ können auch diese Techniken nichts ausrichten 😉

Heißt: man kann natürlich Mittel und Wege finden, trotz flex und grid unzugängliche Seiten zu schaffen. Unzugänglichkeit ist ja fast immer progressive enworsement von Natur aus sind html-Dokumente ja Größtenteils zugänglich. Die Probleme baut man ja erst ein, wie Stufen in ein Haus.

Marc

[JürgenB]

Hallo,

zu den <br>: die waren nur da, um einen Mehrzeiler zu bekommen.
Zur fixen Positionierung: das Zentrieren geht auch mit absoluter Positionierung.

Wenn ich auf einer Seite mit mehreren Elementen, z.B. Text mit Überschriften, nur ein Element, z.B. eine Login-Box oder eine Bildvergrößerung, als Overlay zentrieren möchte, geht das auch mit grid oder flex? Mir ist das bisher nur mit einem seitenfüllenden die zu zentrierende Box umschließenden Zusatzelement gelungen.

Gruß
Jürgen

[marctrix]

Hej JürgenB,

zu den <br>: die waren nur da, um einen Mehrzeiler zu bekommen.
Zur fixen Positionierung: das Zentrieren geht auch mit absoluter Positionierung.

Wenn ich auf einer Seite mit mehreren Elementen, z.B. Text mit Überschriften, nur ein Element, z.B. eine Login-Box oder eine Bildvergrößerung, als Overlay zentrieren möchte, geht das auch mit grid oder flex? Mir ist das bisher nur mit einem seitenfüllenden die zu zentrierende Box umschließenden Zusatzelement gelungen.

Ja, ein Element in dem man zentriert, ist nötig. Mit html und body hast du gleich zwei, die sich hervorragend dafür nutzen lassen.

Ein Overlay wird ja eh mit JavaScript o.ä. geöffnet. Da kann man dan dem body auch ein display: flex mit geben.

Allerdings: ich kann diese ganze Zentrierei (aus Nutzersicht) überhaupt nicht leiden! Oft passen die (ausgeblendeten) Inhalte im Hintergrund eben nicht in den Viewport (z.B. wenn man auf dem Handy zoomt) und dann sucht man die Modals/Overlays ständig.

Habe nmie verstanden, warum das tortz der grottigen Nutzbarkeit trotzdem so oft gemacht wird. Stellt Alerts bereit! Die funktionieren! Und wenn die nicht genug bieten, öffnet eine neue Seite mit der gewünschten Funktionalität. Und wenn das nicht geht, platziert halt ein Modal/Overlay am oberen Rand des Viewports horizontal zentriert.

Das ist dann aber auch schon ausreichend hübsch und schlecht bedienbar.

Mir als Nutzer kann dieser ganze Mist gestohlen bleiben. - Aus technischer Sicht ist es eine interessante Herausforderung, so etwas halbwegs zugänglich umzusetzen.

Aber gerne sehen tu ich die Dinger trotzdem nicht als Seitenbesucher…

Ausnahme: Dia-Show. Aber auch hier gilt: warum dann die Dia-Show nciht einfach auf einer eigenen Seite öffnen? - Gefällt mir persönlich deutlich besser!

Marc

[Gunnar Bittersmann]

@@marctrix

Ja, ein Element in dem man zentriert, ist nötig. Mit html und body hast du gleich zwei, die sich hervorragend dafür nutzen lassen.

Ein Overlay wird ja eh mit JavaScript o.ä. geöffnet. Da kann man dan dem body auch ein display: flex mit geben.

Bist du sicher, dass das keine Nebenwirkungen auf Elemente hinter dem modalen Dialogfenster hat? 😉

Aus technischer Sicht ist es eine interessante Herausforderung, so etwas halbwegs zugänglich umzusetzen.

Sollte nicht mit role="dialog" für das modale Fenster schon das Wesentliche getan sein?

LLAP 🖖

[marctrix]

Hej Gunnar,

Ein Overlay wird ja eh mit JavaScript o.ä. geöffnet. Da kann man dan dem body auch ein display: flex mit geben.

Bist du sicher, dass das keine Nebenwirkungen auf Elemente hinter dem modalen Dialogfenster hat? 😉

Aber die sieht man dann ja nicht mehr. Gut wenn es halbtransparent ist, kann das eine schlechte Idee sein.

Es sei denn man hätte den body von Anfang an als Container für ein Grid- oder flexbox-Layout genutzt. Das wäre eh schicker 😉

Aus technischer Sicht ist es eine interessante Herausforderung, so etwas halbwegs zugänglich umzusetzen.

Sollte nicht mit role="dialog" für das modale Fenster schon das Wesentliche getan sein?

Nein, man muss ja verhindern, dass man außerhalb des Modals fokussieren kann, auch darf der Fokus nciht im Modal gefangen sein, man muss also mit Esc oder so wieder raus usw. Ist doch einiges zu beachten.

Marc

[Rolf B]

Hallo ThePi,

die Positionierung des div (per flexbox des Containers um das div herum) und die Textausrichtung im Inneren des div (text-align Eigenschaft des div) haben miteinander nichts zu tun.

Du wirst aber dem div die Breite vorgeben müssen, sonst zieht es der Browser auf 100% Breite des Containers. Mit den relativ neuen Werten min-content/max-content für width und height kannst Du das am Inhalt des div festmachen, gibst dann allerdings die Kompatibilität zu Microsoft-Browsern weg.

Rolf