Wie zentriere ich einen Container und richte untergeordnete Elemente linksbündig mit Medienabfragen aus?

Container zentriert ausrichten und untergeordnete Elemente links ausrichten

In diesem Szenario haben Sie mehrere Bilder mit gleichen Abmessungen, die Sie auf einem anzeigen möchten Webseite. Ihr Ziel ist es, sie in der Mitte der Seite nacheinander mit einem festen Abstand zwischen ihnen zu gruppieren.

Der angegebene CSS-Code versucht, den Container mithilfe von text-align:center auf der Seite zu zentrieren , aber es geht nicht um die Ausrichtung der untergeordneten Bilder. Das Ergebnis ist, dass die Bilder linear angezeigt werden, ohne Zentrierung oder festen Abstand.

Eine umfassendere Lösung erfordert die Berücksichtigung mehrerer Ansichtsfenstergrößen und die Anwendung von Medienabfragen, um geeignete Breiten für das innere Div festzulegen, das die Bilder enthält. Hier ist der Code:

<code class="css">/* Set parent container to be centered */
.outer {
  text-align: center;
}

/* Set inner div to be inline-block for wrapping child elements */
.inner {
  font-size: 0; /* To prevent inline gaps between divs */
  display: inline-block;
  text-align: left;
}

/* Define the individual image elements */
.item {
  font-size: 16px; /* Reset font size */
  display: inline-block;
  margin: 5px; /* Gutter */
}

/* Image alignment within item divs */
.item img {
  vertical-align: top;
}

/* Media queries for different viewport sizes */
@media (max-width: 551px) { /* ((100+5+5)x5)+1 */
  .inner {
    width: 440px; /* (100+5+5)x4 */
  }
}

@media (max-width: 441px) {
  .inner {
    width: 330px;
  }
}

@media (max-width: 331px) {
  .inner {
    width: 220px;
  }
}

@media (max-width: 221px) {
  .inner {
    width: 110px;
  }
}</code>

Durch Anpassen der Breite des inneren Divs basierend auf der Größe des Ansichtsfensters können Sie das gewünschte Layout zentrierter Bilder erreichen, die nach Bedarf umbrochen werden, um sie an den verfügbaren Platz anzupassen. Beachten Sie, dass dieser Ansatz für eine große Anzahl von Bildern möglicherweise nicht optimal ist, da mehrere Medienabfragen erforderlich sind.

Das obige ist der detaillierte Inhalt vonWie zentriere ich einen Container und richte untergeordnete Elemente linksbündig mit Medienabfragen aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!