CSS layout - horisontal og vertikal justering

element centreret

horisontalt og vertikalt centreret element

centrere element

For at centrere en blok element (f.eks. <div>), brug margin: auto;.

At indstille elementets bredde vil forhindre det i at strække sig ud til kont容器的 kant.

Dernæst vil elementet tage den angivne bredde, og den resterende plads vil blive fordelt ligeligt mellem de to ydermargener:

denne div-element er centreret.

Eksempel

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

Prøv det selv

Bemærk:Hvis ikke indstillet width egenskab (eller sæt den til 100％), vil centreret ikke fungere korrekt.

centrere tekst

Hvis du kun vil centere teksten inden for et element, skal du bruge text-align: center;:

denne tekst er centreret.

Eksempel

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

Prøv det selv

Tip:For flere eksempler på, hvordan du kan centere tekst, se CSS tekst dette kapitel.

centrere et billede

Hvis du vil centrere et billede, skal du sætte de ydre marginer til autoog sæt det som et blokelement:}

Eksempel

img {
  display: block;
  margin-venstre: auto;
  margin-højre: auto;
  width: 40%;
}

Prøv det selv

Venstre og højre justering - brug position

En måde at justere elementer på er at bruge position: absolut; :

Denne div er justeret til højre.

Eksempel

.right {
  position: absolut;
  højre: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 20px;
}

Prøv det selv

Bemærk:Absolutt placerede elementer fjernes fra den normale strøm og kan forårsage overlapning af elementer.

Venstre og højre justering - brug float

En anden måde at justere elementer på er at bruge float Egenskab:

Eksempel

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

Prøv det selv

Bemærk:Hvis et element er højere end dets indeholdende element og er flydende, vil det oversvømme sin container. Du kan bruge clearfix hack For at løse dette problem (se eksemplet nedenfor).

clearfix Hack

Dernæst kan vi tilføje til indholdselementet overflow: auto;For at løse dette problem:

Eksempel

.clearfix {
  overflow: auto;
}

Prøv det selv

Vertical justering - brug padding

Der er mange måder at justere elementer lodret i CSS på. En simpel løsning er at bruge top- og bundmargen:

Jeg er centreret lodret.

Eksempel

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

Prøv det selv

Hvis du skal justere både lodret og vandret, brug padding og text-align: center;:

Jeg er centreret både horisontalt og vertikalt.

Eksempel

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

Prøv det selv

Vertical justering - brug line-height

En anden teknik er at brugeværdienlig med højde Egenskabsværdi: line-height Egenskab:

Jeg er centreret både horisontalt og vertikalt.

Eksempel

.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}
/* Hvis der er flere linjer tekst, tilføj følgende kode: */
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

Prøv det selv

Vertical justering - brug position og transform

Hvis dit valg ikke er padding og line-heightHvis en anden løsning er nødvendig, kan du bruge position og transform Egenskab:

Jeg er centreret både horisontalt og vertikalt.

Eksempel

.center { 
  height: 200px;
  position: relativ;
  border: 3px solid green; 
}
.center p {
  margin: 0;
  position: absolut;
  top: 50%;
  venstre: 50%;
  transform: flyt(-50%, -50%);
}

Prøv det selv

Tip:Du vil finde 2D transformation Lær mere om transformegenskaben i dette kapitel.

Vertikal justering - brug Flexbox

Du kan også bruge flexbox til at centere indhold. Bemærk, at IE10 og tidligere versioner ikke understøtter flexbox:

Jeg er centreret både horisontalt og vertikalt.

Eksempel

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

Prøv det selv

Tip:Du vil finde CSS Flexbox Du vil lære mere om Flexbox i dette kapitel.