CSS-layout - horisontell och vertikal justering

element centreras

horisontellt och vertikalt centrerade element

centrera element

För att centrera en blockelement (t.ex. <div>) horisontellt, använd margin: auto;.

Att ställa in elementets bredd förhindrar att det sträcker sig ut till behållarens kant.

Då kommer elementet att använda den specificerade bredden, och den överskjutande utrymmet kommer att fördelas jämnt mellan de två marginalerna:

den här div-elementet är centrerat.

Exempel

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

Prova själv

Observera:Om inte width egenskap (eller ställ in den till 100%) är centreringen ogiltig.

centrera text

Om du bara vill centrera texten inom ett element, använd text-align: center;:

denna text är centrerad.

Exempel

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

Prova själv

Tips:För fler exempel på hur du kan justera text, se CSS-text detta kapitel.

centrera bild

Om du vill centrera en bild, ställ in vänster- och högermarginalen på autooch sätt det till en block-element:}

Exempel

img {
  display: block;
  marginal-vänster: auto;
  marginal-höger: auto;
  bredd: 40%;
}

Prova själv

Vänster och höger justering - använd position

En metod för att justera element är att använda position: absolut; :

Denna div är högerjusterad.

Exempel

.right {
  position: absolut;
  höger: 0px;
  bredd: 300px;
  border: 3px solid #73AD21;
  padding: 20px;
}

Prova själv

Observera:Absolutt placerade element kommer att tas bort från den normala strömmen och kan uppstå elementöverskridning.

Vänster och höger justering - använd float

En annan metod för att justera element är att använda flytande Egenskaper:

Exempel

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

Prova själv

Observera:Om en element är högre än innehållande elementet och det är flytande, kommer det att överskrida sin behållare. Du kan använda clearfix hack För att lösa detta problem (se exempel nedan).

clearfix Hack

Då kan vi lägga till overflow: auto;För att lösa detta problem:

Exempel

.clearfix {
  overflow: auto;
}

Prova själv

Vertikal justering - använd padding

Det finns många sätt att vertikalt justera element i CSS. En enkel lösning är att använda övre och nedre marginaler:

Jag är vertikalt centrerad.

Exempel

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

Prova själv

Om du vill justera både vertikalt och horisontellt, använd padding och text-align: center;:

Jag är horisontellt och vertikalt centrerad.

Exempel

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

Prova själv

Vertikal justering - använd line-height

En annan teknik är att användadess värdeär lika med höjd egenskapsvärdet line-height Egenskaper:

Jag är horisontellt och vertikalt centrerad.

Exempel

.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}
/* Om det finns flera rader text, lägg till följande kod: */
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

Prova själv

Vertikal justering - använd position och transform

Om ditt val inte är padding och line-height，en annan lösning är att använda position och transform Egenskaper:

Jag är horisontellt och vertikalt centrerad.

Exempel

.center { 
  height: 200px;
  position: relativ;
  border: 3px solid green; 
}
.center p {
  marginal: 0;
  position: absolut;
  top: 50%;
  vänster: 50%;
  transform: översätt(-50%, -50%);
}

Prova själv

Tips:Du kommer att i 2D-omvandling Du kommer att lära dig mer om transform egenskapen i detta kapitel.

Vertikal justering - Använd Flexbox

Du kan också använda flexbox för att centrera innehållet.Observera att IE10 och tidigare versioner inte stöder flexbox:

Jag är horisontellt och vertikalt centrerad.

Exempel

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

Prova själv

Tips:Du kommer att i min CSS Flexbox Du kommer att lära dig mer om Flexbox i detta kapitel.