✔ vertikales Zentrieren mit Flexbox - IE10 mal wieder anders als die Anderen...

[Zerberus777]

Hallo,

ich möchte Flexbox einsetzen, um unterschiedlich langen Text (ohne enthaltene Zeilenumbrüche) in einem DIV vertikal und horizontal zu zentrieren. Der Text sollte automatisch innerhalb des DIV umgebrochen werden.

In Firefox, Chrome und Opera funktioniert es auch, nur IE10 tanzt mal wieder aus der Reihe... Er zeigt eine lange Zeile, die aus dem DIV rausläuft.
Ich habe es auch mit dem Workaround 2 auf https://github.com/philipwalton/flexbugs versucht (hatte zur Sicherheit padding, margin und border entfernt), leider ohne Erfolg.

Das Problem kann unter https://jsfiddle.net/Ly5k336b/ nachvollzogen werden.

Grüße

Zerberus

 

[SpiceLab]

Ich habe es auch mit dem Workaround 2 auf https://github.com/philipwalton/flexbugs versucht (hatte zur Sicherheit padding, margin und border entfernt), leider ohne Erfolg.

Dein Versuch ist lediglich am <b>-Tag gescheitert

https://jsfiddle.net/spicelab/3nqghza2/

 

[SpiceLab]

Nachtrag: Andernfalls wäre für das Inline-Element <b> zusätzlich display:block vonnöten, damit es Block-Level-Charakteristika erhält.

https://jsfiddle.net/spicelab/gm5d3yrh/

 

[Zerberus777]

Vielen Dank (mal wieder)!

Wäre schön, wenn sich der IE wie der FF verhalten würde...

 

[SpiceLab]

Vielen Dank (mal wieder)!

Gern geschehen

 

[Zerberus777]

Ich muß mich doch nochmal melden: Und zwar klappt es jetzt mit langen Sätzen, aber KURZE Sätze zentriert der IE10 nicht HORIZONTAL. Die anderen Browser tun es, nachdem ich noch einen "justify-content: center"-Eintrag hinzugefügt habe. Die neue Herausforderung ist unter https://jsfiddle.net/gm5d3yrh/8/ zu finden .

Grüße

Zerberus

 

[SpiceLab]

KURZE Sätze zentriert der IE10 nicht HORIZONTAL. Die anderen Browser tun es, nachdem ich noch einen "justify-content: center"-Eintrag hinzugefügt habe.

Kann ich nicht bestätigen:



PS: Der ID-Bezeichner (#text) muß im HTML-Code eindeutig sein. Andernfalls kommt eine Klasse (.text) zum Einsatz

 

[Zerberus777]

Bei mir sieht's so aus:

 

[SpiceLab]

Schau mal hier: Aktualisierungen für das "Flexbox"-Layout (gilt für IE 11 + Edge)

Die folgenden Eigenschaften haben sich geändert:

 

[Zerberus777]

Jetzt klappt's auch bei mir mit dem IE10. Mit Deinem Link habe ich das CSS neu aufgebaut, und siehe: https://jsfiddle.net/Ly5k336b/6/

Falls Jemand mit dem IE11 oder Ätsch mal testen könnte, ob Alles schön in der Mitte ist

Schönen Abend noch

Zerberus

PS: NEEEEEEIN! Nachdem ich das Beispiel OHNE ÄNDERUNG nochmal aufgerufen habe, klebte es im IE10 wieder am linken Rand!