Heim > Web-Frontend > CSS-Tutorial > Wie zentriere ich einen Container und richte untergeordnete Elemente linksbündig mit Medienabfragen aus?

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

Linda Hamilton
Freigeben: 2024-11-01 12:10:02
Original
1038 Leute haben es durchsucht

How to Center a Container and Left-Align Child Elements with Media Queries?

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage