Hallo, hier habe ich noch ein Positionierungsproblem:
Nachfolgend das CSS:
#wrapper {
display: grid;
grid-template-rows: 100px 1fr 100px;
grid-template-columns: 250px 1fr 250px;
height: 100vh;
}
header {
background: #000066;
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
}
Und hier das html:
<div id="wrapper">
<header role="banner">
<div class="flex"><img src="../../bilder/logo_zander_animiert.gif" width="110" height="85" alt=""/><img src="../../bilder/animierter_zander_von_links_nach_rechts.gif" width="120" height="92" alt="Zander von links nach rechts"/><img src="../../banner-Dateien/image001.gif" alt="Logo Verein" width="414" height="48" /><img src="../../bilder/animierter_zander_von_rechts_nach_links.gif" width="120" height="92" alt=""/><img src="../../bilder/logo_zander_animiert.gif" width="110" height="85" alt=""/></div></header></div>
Wie muss ich jetzt das CSS ändern, damit die beiden "Bilder/logo_zander_animiert.gif" links und rechts am Rand stehen und nicht auch zentriert werden, wie das Logo und die beiden Zander, die sich hin und her bewegen?
Danke für Eure Hilfe.