Layout CSS - wyrównanie poziome i pionowe

element wyważony

elementów wyważonych poziomo i pionowo

wyważenie elementu

Aby wyważyć blokowy element (np. <div>), użyj margin: auto;.

ustawienie szerokości elementu zapobiegnie rozszerzeniu się do krawędzi kontenera.

Następnie, element zajmie określoną szerokość, a reszta przestrzeni zostanie równomiernie podzielona między dwoma marginesami zewnętrznymi:

ten element div jest wyśrodkowany.

Przykład

.center {
  margin: auto;
  szerokość: 50%;
  border: 3px solid green;
  padding: 20px;
}

Spróbuj sam

Uwaga:Jeśli nie ustawiono szerokość atrybutu (lub ustaw go na 100％), wyważenie będzie niewłaściwe.

wyważenie tekstu

Jeśli chcesz tylko wyśrodkować tekst w elemencie, użyj text-align: center;:

ten tekst jest wyśrodkowany.

Przykład

.center {
  text-align: center;
  border: 3px solid green;
}

Spróbuj sam

Wskazówka:Aby uzyskać więcej przykładów na wyważanie tekstu, zobacz Tekst CSS to rozdział.

wyśrodkowanie obrazu

Jeśli chcesz wyśrodkować obraz, ustaw lewe i prawe marginesy zewnętrzne autoi ustaw go jako element blokowy:}

Przykład

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

Spróbuj sam

Wyrównanie z lewej i prawej strony - użycie position

Jednym z sposobów wyrównania elementów jest użycie position: absolute; :

Ten div jest wyrównany do prawej strony.

Przykład

.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 20px;
}

Spróbuj sam

Uwaga:Elementy umieszczone w absolutnym pozycjonowaniu są usuwane z normalnego strumienia i mogą się nakładać.

Wyrównanie z lewej i prawej strony - użycie float

Innym sposobem wyrównania elementów jest użycie float Atrybuty:

Przykład

.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

Spróbuj sam

Uwaga:Jeśli element jest wyższy niż element go zawierający i jest pływający, będzie wypływał poza jego kontener. Możesz użyć hack clearfix Aby rozwiązać ten problem (zobacz poniższy przykład).

Hack clearfix

Następnie możemy dodać do elementu zawierającego overflow: auto;Aby rozwiązać ten problem:

Przykład

.clearfix {
  overflow: auto;
}

Spróbuj sam

Wyrównanie pionowe - użycie padding

W CSS istnieje wiele sposobów wyrównania elementów pionowo. Prostym rozwiązaniem jest użycie wewnętrznych marginesów górnych i dolnych:

Jestem wyrównany wertykalnie.

Przykład

.center {
  padding: 70px 0;
  border: 3px solid green;
}

Spróbuj sam

Aby jednocześnie wyrównać pionowo i poziomo, użyj padding i text-align: center;:

Jestem wyrównany poziomo i pionowo.

Przykład

.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}

Spróbuj sam

Wyrównanie pionowe - użycie line-height

Innym trikiem jest użyciejej wartościjest równa height Wartość atrybutu line-height Atrybuty:

Jestem wyrównany poziomo i pionowo.

Przykład

.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}
/* Jeśli jest więcej wierszy tekstu, dodaj następujący kod: */
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

Spróbuj sam

Wyrównanie pionowe - użycie position i transform

Jeśli Twój wybór nie jest padding i line-heightW przypadku innej rozwiązania, można użyć position i transform Atrybuty:

Jestem wyrównany poziomo i pionowo.

Przykład

.center { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}
.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Spróbuj sam

Wskazówka:Będziesz w Przekształcenia 2D W tym rozdziale nauczysz się więcej o właściwości transform

Wyrównanie pionowe - używając Flexbox

Możesz również użyć flexbox do wyśrodkowania treści. Proszę zauważyć, że IE10 i wcześniejsze wersje nie obsługują flexbox:

Jestem wyrównany poziomo i pionowo.

Przykład

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green; 
}

Spróbuj sam

Wskazówka:Będziesz w mojej CSS Flexbox W tej rozdziale nauczysz się więcej o Flexbox