Bildzentrierung funktioniert nicht im IE11 (hat evtl. was mit Flexbox zu tun)

  • CSS

Es gibt 4 Antworten in diesem Thema. Der letzte Beitrag () ist von Marcus Gräfe.

    Bildzentrierung funktioniert nicht im IE11 (hat evtl. was mit Flexbox zu tun)

    Ich hätte da mal wieder ein CSS-Problem... ;)

    Ich habe ein DIV (hier article) als Flexbox definiert und darin zwei weitere DIVs (bzw. eines davon ist figure). Es handelt sich um ein Bild, welches unter einem Text zentriert sein soll (zentriert im Browserfenster, der Text selbst ist linksbündig).

    Das funktioniert wunderbar in Chrome, Firefox und Edge, nicht aber im Internet Explorer Version 11. Dort bleibt das Bild linksbündig, also wie der Text.

    Ideen, wie ich das Bild zentrieren kann? Hier der Code, darunter ein JSFiddle-Link:

    HTML-Quellcode

    1. <article>
    2. <figure id="image-figure"><img id="mainimage" src="https://cdn.pixabay.com/user/2015/01/20/20-56-42-330_250x250.jpg" alt="" /></figure>
    3. <div>
    4. <header><h1>title</h1></header>
    5. <p>text</p>
    6. </div>
    7. </article>

    CSS-Quellcode

    1. article {
    2. display: -webkit-box;
    3. display: -webkit-flex;
    4. display: -ms-flexbox;
    5. display: flex;
    6. -webkit-box-orient: vertical;
    7. -webkit-box-direction: reverse;
    8. -webkit-flex-direction: column-reverse;
    9. -ms-flex-direction: column-reverse;
    10. flex-direction: column-reverse;
    11. margin-top: 0.5em;
    12. text-align: justify;
    13. }
    14. #image-figure { margin: 0 auto; }
    15. #mainimage {
    16. width: 100%;
    17. max-width: calc(300px + 2vw);
    18. height: auto;
    19. }


    JSFiddle: jsfiddle.net/mmamxddj/

    Danke vorab!
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum
    So klappts ;)

    HTML-Quellcode

    1. <!Doctype HTML>
    2. <html>
    3. <head>
    4. <style>
    5. article{
    6. display: -webkit-box;
    7. display: -moz-box;
    8. display: -ms-flexbox;
    9. display: -webkit-flex;
    10. display: flex;
    11. -webkit-box-orient: vertical;
    12. -webkit-box-direction: reverse;
    13. -webkit-flex-direction: column-reverse;
    14. -ms-flex-direction: column-reverse;
    15. flex-direction: column-reverse;
    16. align-items: center;
    17. justify-content: center;
    18. }
    19. #some_container{
    20. align-self: flex-start;
    21. }
    22. #image-figure {
    23. margin: 0 auto;
    24. }
    25. #mainimage {
    26. width: 100%;
    27. max-width: calc(300px + 2vw);
    28. height: auto;
    29. }
    30. </style>
    31. </head>
    32. <body>
    33. <article>
    34. <figure id="image-figure">
    35. <img id="mainimage" src="https://cdn.pixabay.com/user/2015/01/20/20-56-42-330_250x250.jpg" alt="" />
    36. </figure>
    37. <div id="some_container">
    38. <header>
    39. <h1>title</h1>
    40. </header>
    41. <p>text</p>
    42. </div>
    43. </article>
    44. </body>
    45. </html>
    Cloud Computer? Nein Danke! Das ist nur ein weiterer Schritt zur totalen Überwachung.
    „Wer die Freiheit aufgibt, um Sicherheit zu gewinnen, wird am Ende beides verlieren.“
    Benjamin Franklin
    Zunächst einmal danke. Wenn ich das richtig sehe, sind die Unterschiede wie folgt:

    CSS-Quellcode

    1. article{
    2. align-items: center;
    3. justify-content: center;
    4. }
    5. #some_container{
    6. align-self: flex-start;
    7. }

    Richtig?

    Habe das so durchgeführt. Leider gibt es dadurch ein neues Problem: Der Text im Paragraphen wird nicht mehr umgebrochen.

    JSFiddle mit langem Text (und ansonsten meinem Beispiel oben):
    jsfiddle.net/mmamxddj/2/

    JSFiddle mit deinen Änderungen und dem langen Text:
    jsfiddle.net/mmamxddj/3/
    (im IE sieht man, dass der Text weit aus dem Bildschirm hinausragt).

    Das ist leider noch schlimmer als das nicht zentrierte Bild. ;)

    Aber ansonsten klappt's.

    EDIT #1: Diese beiden Forenbeiträge beschäftigen sich mit genau dieser Problematik, die darin enthaltenen Lösungen funktionieren aber nicht:

    stackoverflow.com/questions/27…nt-does-not-break-codepen
    stackoverflow.com/questions/36…reaks-using-flexbox-at-ie

    EDIT #2: Habe es nun doch hinbekommen! Unter stackoverflow.com/questions/35…ainer-doesnt-wrap-in-ie11 gab's den entscheidenden Hinweis:
    Note: Sometimes it will be necessary to sort through the various levels of the HTML structure to pinpoint which container gets the width: 100%

    Ein width: 100%; beim some_container hat geholfen, hier also die Lösung:
    jsfiddle.net/mmamxddj/4/

    DANKE! :)

    EDIT #3: Neues Problem! Das Bild wird nun nicht mehr ans Browserfenster angepasst (nur IE), d. h. verkleinert man den Browser, so erscheint irgendwann eine horizontale Scrollbar. Die Zentrierung scheint übrigens auch ohne align-self: flex-start; und justify-content: center; zu gehen, also es reicht offenbar align-items: center;.
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum

    Dieser Beitrag wurde bereits 4 mal editiert, zuletzt von „Marcus Gräfe“ ()

    justify-content: center; ist tatsächlich unnötig, aber ohne align-self: flex-start; wäre im Beispiel der Text nicht links gewesen.
    Cloud Computer? Nein Danke! Das ist nur ein weiterer Schritt zur totalen Überwachung.
    „Wer die Freiheit aufgibt, um Sicherheit zu gewinnen, wird am Ende beides verlieren.“
    Benjamin Franklin
    Ich hab's getestet, der Text ist linksbündig, auch ohne align-self: flex-start;. Jetzt ist nur noch die Frage, warum das Bild nun nicht mehr kleiner wird. Es gibt dazu eine Menge Threads bei stackoverflow, aber die dort geposteten Lösungen klappen nicht (meist ist die Rede von flex: 1; oder sowas in der Art).

    EDIT: Hier ist das aktuelle JSFiddle, wo das Problem im IE besteht: jsfiddle.net/mmamxddj/5/
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „Marcus Gräfe“ ()