Jak równolegle wyśrodkować obrazy

Naucz się, jak równolegle wyśrodkować obrazy za pomocą CSS.

Jak umieścić obrazy równolegle

Krok 1 - Dodaj HTML:

<div class="row">
  <div class="column">
    <img src="img_snow.jpg" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="img_forest.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="column">
    <img src="img_mountains.jpg" alt="Mountains" style="width:100%">
  </div>
</div>

Krok 2 - Dodaj CSS:

Jak używać CSS float Atrybuty tworzące równoległe obrazy:

Przykład floating

/* Trzy kontenery obrazów (cztery kontenery obrazów używają 25%, dwa kontenery obrazów używają 50%, itd.) */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}
/* Usuń floating poza kontenerem obrazów */
.row::after {
  content: "";
  clear: both;
  display: table;
}

Spróbuj sam

Jak używać CSS flex Atrybuty tworzące równoległe obrazy:

Przykład Flexbox

.row {
  display: flex;
}
.column {
  flex: 33.33%;
  padding: 5px;
}

Spróbuj sam

Uwaga:Flexbox nie obsługuje Internet Explorer 10 i wcześniejszych wersji. Czy chcesz używać float lub flex do tworzenia trzech kolumn, zależy od ciebie. Ale jeśli musisz obsługiwać IE10 i wcześniejsze wersje, powinieneś użyć float.

Wskazówka:Chcesz dowiedzieć się więcej o modułach Flexbox, przeczytaj nasz Tutorial CSS Flexbox.

Dodaj responsywność

Lub możesz dodać media query, aby obrazy były nadpisywane na określonej szerokości ekranu zamiast równolegle.

Poniższy przykład pokaże, jak obrazy będą wertykalnie nadpisywane na ekranach szerokości 500px lub mniejszej:

Przykład responsywny

/* Responsywna布局 - aby kolumny były nadpisywane zamiast równoległe */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

Spróbuj sam

Chcesz dowiedzieć się więcej o media queries, przeczytaj nasz Tutorial CSS media queries.

Powiązane strony

Tutorial:CSS obraz

Tutorial:CSS浮动

Tutorial:CSS biblioteka obrazów