CSS horisontaalinen ja vertikaalinen tasaus

elementti tasainen

horisontaalisesti ja vertikaalisesti tasaiset elementit

tasainen tasaus elementti

Jos haluat tasapainottaa palikkalevyelementtiä (esim. <div>) horisontaalisesti, käytä margin: auto;.

Elementin leveyden asettaminen estää sen levittäytymisen konttin reunoihin.

Sitten, elementti käyttää määriteltyä leveyttä, ja jäljelle jäävä tila jaetaan tasaisesti kahden ulkoreunan välillä:

Tämä div-elementti on keskittynyt.

Esimerkki

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

Kokeile itse

Huomaa:Jos sitä ei ole asetettu width ominaisuutta (tai aseta se 100%:iin), keskelle tasainen taso ei toimi.

Keskelle tasainen teksti

Jos haluat keskittää tekstin vain elementin sisällä, käytä text-align: keskellä;:

Tämä teksti on keskittynyt.

Esimerkki

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

Kokeile itse

Vinkki:Lisää esimerkkejä tekstin tasauksesta, katso CSS teksti Tämä luku.

Keskelle tasainen kuva

Jos haluat keskittää kuvan, aseta sen vasen ja oikea ulkoreuna automaattiseksi. autoja aseta se blokki-elementiksi：

Esimerkki

img {
  display: block;
  margin-vasen: auto;
  margin-oikea: auto;
  width: 40%;
}

Kokeile itse

vasen ja oikea tasaus - käytä position

Elementtien tasauksen tapana on käyttää position: absoluuttinen; :

Tämä div on oikein tasattu.

Esimerkki

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

Kokeile itse

Huomaa:absoluuttisesti sijoitetut elementit poistetaan normaalista virrasta ja ne voivat olla elementtien päällekkäisyyttä.

vasen ja oikea tasaus - käytä float

toisenlaisen elementtien tasauksen tapana on käyttää float Ominaisuus:

Esimerkki

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

Kokeile itse

Huomaa:Jos elementti on korkeampi kuin sen sisältävä elementti ja se on kelluva, se virtaa ulos konttoristaan. Voit käyttää clearfix hack ratkaista tämä ongelma（katso alla oleva esimerkki）。

clearfix Hack

Sitten voimme lisätä sisältöelementtiin overflow: auto;ratkaista tämä ongelma:

Esimerkki

.clearfix {
  overflow: auto;
}

Kokeile itse

pystysuuntainen tasaus - käytä padding

On monia tapoja tasata elementtejä pystysuunnassa CSS:ssä. Yksi yksinkertainen ratkaisu on käyttää ylä- ja alaleveyksiä:

Olen keskellä.

Esimerkki

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

Kokeile itse

Jos haluat tasata sekä pystysuunnassa että horisontaalisesti, käytä padding ja text-align: keskellä;:

Olen horisontaalisesti ja vertikaalisesti keskitetty.

Esimerkki

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

Kokeile itse

pystysuuntainen tasaus - käytä line-height

toinen taktiikka on käyttääarvoon korkeus ominaisuusarvon line-height Ominaisuus:

Olen horisontaalisesti ja vertikaalisesti keskitetty.

Esimerkki

.center {
  line-height: 200px;
  korkeus: 200px;
  border: 3px solid green;
  text-align: keskellä;
}
/* Jos on useita rivejä tekstiä, lisää seuraava koodi: */
.keskitetty p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: keskellä;
}

Kokeile itse

pystysuuntainen tasaus - käytä position ja transform

Jos valintasi ei ole padding ja line-height，toinen ratkaisu on käyttää position ja transform Ominaisuus:

Olen horisontaalisesti ja vertikaalisesti keskitetty.

Esimerkki

.center { 
  korkeus: 200px;
  position: suhteellinen;
  border: 3px solid green; 
}
.keskitetty p {
  margin: 0;
  position: absoluuttinen;
  ylä: 50%;
  vasen: 50%;
  transform: siirrä(-50%, -50%);
}

Kokeile itse

Vinkki:Sinä tulet 2D muunnokset Tässä luvussa opit lisää transform ominaisuudesta.

Pystysuuntainen tasaus - käyttää Flexboxia

Voit käyttää myös flexboxia sisällön keskittämiseen. Huomaa, että IE10 ja aikaisemmat versiot eivät tue flexboxia:

Olen horisontaalisesti ja vertikaalisesti keskitetty.

Esimerkki

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

Kokeile itse

Vinkki:Sinä tulet CSS Flexbox Tässä luvussa opit lisää Flexboxista.