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

Center Align Container and Left Align Child Elements

In this scenario, you have multiple images of equal dimensions that you want to display on a webpage. Your goal is to have them grouped together in the center of the page, one after another, with a fixed distance between them.

The given CSS code attempts to center the container in the page using text-align: center, but it does not address the alignment of the child images. The result is that the images are displayed linearly, without any centering or fixed spacing.

A more comprehensive solution requires considering multiple viewport sizes and applying media queries to set appropriate widths for the inner div that contains the images. Here's the 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>

By adjusting the width of the inner div based on the viewport size, you can achieve the desired layout of centered images, wrapped as needed to fit the available space. Note that this approach may not be optimal for a large number of images, as it involves multiple media queries.

The above is the detailed content of How to Center a Container and Left-Align Child Elements with Media Queries?. For more information, please follow other related articles on the PHP Chinese website!