CSS Layout - Horizontale en Verticale Uitlijning

het element centreren

horizontaal en verticaal centreren van het element

centreren van het element

Om een blokelement (zoals <div>) horizontaal te centreren, gebruik dan margin: auto;.

Het instellen van de breedte van een element voorkomt dat het uitstrekt tot de rand van het container.

Daarna zal het element de opgegeven breedte innemen, de overige ruimte wordt gelijk verdeeld tussen de twee marges:

deze div-element is centreren.

Voorbeeld

.center {
  margin: auto;
  width: 50%;
  border: 3px vast groen;
  inleg: 20px;
}

Probeer het zelf

Opmerking:Als width niet is ingesteld width eigenschap (of stel deze in op 100%) dan is centreren niet geldig.

centreren van de tekst

Als u alleen tekst in een element wilt centreren, gebruik dan text-align: center;:

deze tekst is centreren.

Voorbeeld

.center {
  text-align: center;
  border: 3px vast groen;
}

Probeer het zelf

Tip:Voor meer voorbeelden van hoe tekst uit te lijnen, zie CSS Tekst dit hoofdstuk.

centreren van de afbeelding

Als u een afbeelding centreren wilt, stel dan de linker en rechter marges in autoen het instellen van het als een blokelement:

Voorbeeld

img {
  display: blok;
  marge-links: auto;
  marge-rechts: auto;
  breedte: 40%;
}

Probeer het zelf

links en rechts uitlijnen - gebruik positie

Een manier om elementen uit te lijnen is om positie: absoluut; :

Deze div is rechts uitgelijnd.

Voorbeeld

.right {
  positie: absoluut;
  rechts: 0px;
  breedte: 300px;
  rand: 3px vast #73AD21;
  inleg: 20px;
}

Probeer het zelf

Opmerking:absoluut geplaatste elementen worden verwijderd uit de normale stroom en kunnen elementoverlapping veroorzaken.

links en rechts uitlijnen - gebruik float

Een andere manier om elementen uit te lijnen is om float Eigenschappen:

Voorbeeld

.right {
  float: right;
  breedte: 300px;
  rand: 3px vast #73AD21;
  inleg: 10px;
}

Probeer het zelf

Opmerking:Als een element hoger is dan het bevattende element en het is gefloat, zal het de container overschrijden. U kunt clearfix hack om dit probleem op te lossen (zie het voorbeeld hieronder).

clearfix Hack

Daarna kunnen we de bevattende elementen toevoegen overflow: auto;om dit probleem op te lossen:

Voorbeeld

.clearfix {
  overflow: auto;
}

Probeer het zelf

verticale uitlijning - gebruik inleg

Er zijn veel manieren om elementen in CSS verticaal uit te lijnen. Een eenvoudige oplossing is om de boven- en onderinleg te gebruiken:

Ik ben verticaal gesentraliseerd.

Voorbeeld

.center {
  inleg: 70px 0;
  border: 3px vast groen;
}

Probeer het zelf

Als u zowel verticaal als horizontaal uitlijning wilt, gebruik dan inleg en text-align: center;:

Ik ben horizontaal en verticaal centreren.

Voorbeeld

.center {
  inleg: 70px 0;
  border: 3px vast groen;
  text-align: center;
}

Probeer het zelf

verticale uitlijning - gebruik line-height

een andere techniek is om te gebruikenzijn waardeis gelijk aan hoogte de waarde van de eigenschap line-height Eigenschappen:

Ik ben horizontaal en verticaal centreren.

Voorbeeld

.center {
  line-height: 200px;
  hoogte: 200px;
  border: 3px vast groen;
  text-align: center;
}
/* Als er meerdere regels tekst zijn, voeg dan de volgende code toe: */
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

Probeer het zelf

verticale uitlijning - gebruik positie en transform

Als uw keuze niet is inleg en line-heightwanneer, een andere oplossing is om positie en transform Eigenschappen:

Ik ben horizontaal en verticaal centreren.

Voorbeeld

.center { 
  hoogte: 200px;
  positie: relatief;
  border: 3px vast groen; 
}
.center p {
  marge: 0;
  positie: absoluut;
  boven: 50%;
  links: 50%;
  transform: vertaal(-50%, -50%);
}

Probeer het zelf

Tip:Je zult in 2D transformaties In dit hoofdstuk leer je meer over de transform eigenschap.

Verticale uitlijning - gebruik Flexbox

Je kunt ook flexbox gebruiken om inhoud te centreren. Let op, IE10 en oudere versies ondersteunen geen flexbox:

Ik ben horizontaal en verticaal centreren.

Voorbeeld

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  hoogte: 200px;
  border: 3px vast groen; 
}

Probeer het zelf

Tip:Je zult in mijn CSS Flexbox Je leert in dit hoofdstuk meer over Flexbox.