Ich hätte da mal wieder ein CSS-Problem...
Ich habe ein DIV (hier
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:
JSFiddle: jsfiddle.net/mmamxddj/
Danke vorab!
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:
CSS-Quellcode
- article {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: reverse;
- -webkit-flex-direction: column-reverse;
- -ms-flex-direction: column-reverse;
- flex-direction: column-reverse;
- margin-top: 0.5em;
- text-align: justify;
- }
- #image-figure { margin: 0 auto; }
- #mainimage {
- width: 100%;
- max-width: calc(300px + 2vw);
- height: auto;
- }
JSFiddle: jsfiddle.net/mmamxddj/
Danke vorab!