Er zijn een aantal problemen met het verticaal centreren van elementen in CSS kant-en-klare oplossingen. Het selecteren van de uitlijningsmethode in elk speciaal geval hangt af van het type, de grootte, de positionering van de elementen en andere eigenschappen die door hen worden gespecificeerd.

Hieronder staan ​​enkele populaire technieken voor verticale uitlijning onder lay-outontwerpers. Het laat zien hoe ze werken en voor welke gevallen elk van hen het meest geschikt is.

Hier zijn twee div-elementen:

Elke methode wordt gebruikt om de binnenunit uit te lijnen met het midden van de buitenunit.

lijnhoogte voor één lijn

Wanneer de ouder één regel tekst bezet en de lengte van het kind bekend is, kan de eigenschap line-height worden toegepast. De waarde van het onroerend goed moet zijn gelijk aan hoogte externe eenheid. Dit werkt alleen voor één regel, dus het is handig om overflow: verborgen en witruimte: norap toe te voegen aan het kind.

Het is niet mogelijk om de procentuele notatie line-height=100% te gebruiken, omdat 100% in dit geval de letterhoogte is.

Container (
hoogte: 300px;
lijnhoogte: 300px;
}

Binnen (
witruimte: nowrap;
overloop: verborgen;
}

De methode is alleen toepasbaar als de hoogte van het externe blok bekend is.

Tabel met verticale uitlijning

Een tafel is ideaal voor het verticaal uitlijnen van elementen. Om de semantiek niet te schenden, is het beter om tabelelementen te maken met behulp van CSS. De positie van de celinhoud wordt bepaald door verticaal uitlijnen. Er zijn vier waarden voor deze eigenschap in tabellen:

Basislijn - standaard;
. bodem — inhoud onderaan de cel;
. midden — inhoud in het midden van de cel;
. top — inhoud bovenaan de cel.

In het eerste voorbeeld wordt een enkele tabelcel het buitenste blok.

Container (
weergave: tabelcel;
verticaal uitlijnen: midden;
}

Het goede aan deze methode is dat deze werkt voor elementen zonder een bepaalde hoogte, maar in sommige gevallen wordt het gebruik ervan belemmerd door het feit dat het buitenste blok, net als elke tabelcel, zijn breedte aanpast aan de inhoud, en je het kunt uitrekken. alleen door de breedte expliciet in te stellen voor breedte. Voor een cel zonder tabel werken percentages niet adequaat.

Deze tekortkoming wordt gecorrigeerd door de cel in de ouder te verpakken met de eigenschap display:table. De grootte van dit element kan als percentage worden ingesteld. De uiteindelijke code ziet er als volgt uit:

Buitenverpakking (
weergave: tafel;
}

Container (
weergave: tabelcel;
verticaal uitlijnen: midden;
}

Positie: absoluut + negatieve marge

De methode wordt gebruikt wanneer de hoogte van het interne element bekend is. Mogelijk is dit onbekend bij de externe eenheid. Er wordt gevraagd naar de ouder relatieve positionering, en de afstammeling daarin is absoluut.

Een bovenste eigenschapswaarde van 50% zorgt ervoor dat het geneste element met de bovenrand in het midden van het buitenste blok wordt geplaatst. Het enige dat overblijft is om de bovenkant van de negatieve marge met de helft van zijn eigen hoogte te verhogen, zodat deze precies in het midden van de verticaal staat.

Container (
positie: relatief;
}

Binnen (
hoogte: 140px;
positie: absoluut;
bovenkant: 50%;
marge bovenaan: -70px;
}

Het nadeel van deze methode is de noodzaak om de lengte van het kind te kennen.

Uitlijning in lijn met verticale uitlijning

Uitlijning van kleine letters en kleine letters blok elementen, inclusief afbeeldingen en pictogrammen, in de tekst eromheen wordt uitgevoerd door de eigenschap verticaal uitlijnen. In tegenstelling tot een tabel werkt in dit geval de volledige reeks waarden die in de specificatie zijn gespecificeerd.

Als de hoogte van de ouder bekend is, kan deze eigenschap worden gebruikt om tekst met meerdere regels te centreren.

Voor het buitenste blok is de centrering van één lijn voorgeschreven.

Container (
hoogte: 140px;
lijnhoogte: 140px;
}

De lijnhoogtewaarde voor het binnenste blok wordt opnieuw gedefinieerd naar normaal of naar elke gewenste waarde. Het krijgt ook de uitlijning verticaal uitlijnen: midden en conversie naar een inline-bloktype - weergave: inline-blok.

Binnen (
display: inline-blok;
lijnhoogte: normaal;
verticaal uitlijnen: midden;
}

Het nadeel van deze methode is dat je de lengte van de ouder moet weten.

Afstemming met transformatie

Met de functie translationY van de eigenschap transform kunt u een binnenblok van onbekende hoogte centreren. Om dit te doen, moet de ouder relatief worden gepositioneerd en het kind absoluut.

De bovenste eigenschap met een waarde van 50% verlaagt het binnenste blok zodat de bovenrand ervan in het midden van het bovenliggende blok wordt geplaatst. TranslateY-waarde: -50%, verhoogt het element tot de helft van zijn eigen hoogte en lijnt daardoor uit verticale middelpunten blokken.

Container (
positie: relatief;
}

Binnen (
positie: absoluut;
bovenkant: 50%;
transformeren: vertalenY(-50%);
}

Het nadeel van deze techniek is de beperkte ondersteuning voor transformatiefuncties in de IE-browser.

Uitlijning via pseudo-element

De methode werkt als de hoogte van noch het eerste, noch het tweede blok onbekend is. Er wordt een inline-block pseudo-element toegevoegd binnen het bovenliggende element met before of after. De hoogte van het toegevoegde element moet gelijk zijn aan de hoogte van het bovenliggende element - hoogte: 100%. De verticale uitlijning van de inhoud wordt ingesteld met verticale uitlijning: midden.

Met behulp van verticaal uitlijnen: midden wordt het binnenste blok uitgelijnd ten opzichte van dit pseudo-element. Omdat de ouder en het kind dezelfde hoogte hebben, is het binnenste element, hoewel verticaal uitgelijnd met het pseudo-element, ook gecentreerd met de buitenste doos.

Container:voor (
inhoud: "";
hoogte: 100%;
verticaal uitlijnen: midden;
display: inline-blok;
}

Binnen (
display: inline-blok;
verticaal uitlijnen: midden;
}

Universele methode. Werkt niet als de binnenunit is ingesteld absolute positionering.

Flexbox

De nieuwste en eenvoudigste manier om elementen verticaal uit te lijnen. Met Flexbox kunt u elementen van een webpagina naar wens rangschikken. Om een ​​blok te centreren, hoeft u alleen maar weergave in te stellen: flex voor de ouder en marge: auto voor het kind.

Container (
weergave: flex;
breedte: 320px;
hoogte: 140px;
}

Binnen (
breedte: 120px;
marge: automatisch;
}

Flexbox werkt alleen in moderne browsers.

Een methode kiezen

Welke techniek voor verticale uitlijning u moet gebruiken, hangt af van de taak en de beperkingen die in een bepaald geval aanwezig kunnen zijn.

De hoogte van de elementen is onbekend

In deze situatie kunt u een van de vier universele methoden gebruiken:

1. Tabel. De ouder wordt een tabelcel gemaakt in HTML of via display-table/display-cell. Dit ouderelement krijgt verticaal uitgelijnd: midden.

2. Pseudo-element. Voor het buitenste blok wordt een inline-block pseudo-element gemaakt met breedte=100% en verticaal uitgelijnd: midden. Het kind krijgt weergave: inline-block en verticaal uitgelijnd: midden. De methode werkt niet alleen als het interne blok een absolute positionering krijgt.

3. Transformeren. De ouder krijgt positie: relatief. Het kind krijgt positie: absoluut, top: 50% en transformatie: translationY(-50%);

4. Flexbox. Het buitenste blok is ingesteld op weergave: flex, het binnenste blok krijgt marge: auto.

Alleen de lengte van het kind is bekend

De buitenpost is relatief gepositioneerd; Het binnenste element krijgt een absolute positionering, bovenaan: 50% en een marge bovenaan gelijk aan de helft van de hoogte.

Eén regel per blok met bekende hoogte

Het buitenste blok krijgt een lijnhoogte-eigenschap met een waarde die gelijk is aan de hoogte ervan.

De hoogte van het buitenste blok is bekend, maar het binnenste element niet.

De ouder krijgt een lijnhoogte die gelijk is aan zijn hoogte. De lijnhoogtewaarde van het kind wordt opnieuw gedefinieerd naar normaal of elke gewenste waarde, en weergave: inline-block en verticaal uitlijnen: midden worden eraan gegeven.

Het artikel van vandaag wil je laten zien hoe je een div kunt centreren, zowel horizontaal als verticaal, met behulp van een paar CSS-trucs. We zullen u ook vertellen hoe u de hele pagina of in een afzonderlijk div-element kunt centreren.

Centreer eenvoudig een DIV-element op de pagina

Deze methode werkt perfect in alle browsers.

CSS

Midden-div ( marge: 0 automatisch; breedte: 100px; )

Voorbeeld

De waarde auto in de marge-eigenschap stelt de linker- en rechtermarge in op de gehele beschikbare ruimte op de pagina. Het belangrijkste om te onthouden is dat voor het gecentreerde div-element een breedtewaarde moet zijn ingesteld.

Een DIV centreren binnen een DIV-element op de ouderwetse manier

Deze div-methode voor middenuitlijning werkt in alle browsers.

CSS

Buitenste-div (opvulling: 30px; ) .inner-div ( marge: 0 auto; breedte: 100px; )

HTML

Voorbeeld

De buitenste div kan op elke gewenste manier worden geplaatst, maar de binnenste div moet een bepaalde breedte (width) hebben.

Een DIV centreren binnen een DIV-element met behulp van inline-block

Bij deze methode om een ​​div binnen een div te centreren, is het niet nodig om de breedte van het binnenste element op te geven. Het werkt in alle moderne browsers, inclusief IE8.

CSS

Outer-div (opvulling: 30px; tekstuitlijning: centreren; ) .inner-div (weergave: inline-block; opvulling: 50px; )

HTML

Voorbeeld

eigenschap tekst uitlijnen werkt alleen op inline-elementen. Met de inline-block-waarde kan de binnenste div worden weergegeven als een inline-element en ook als een blok (inline-block). Met de eigenschap text-align op het buitenste div-element kunnen we de binnenste div centreren.

Centreer een DIV binnen een DIV-element horizontaal en verticaal

Hier marge: auto wordt gebruikt om de div in het midden van de pagina te centreren. Het voorbeeld werkt in alle moderne browsers.

CSS

Buitenste div (opvulling: 30px; ) .inner-div ( marge: auto; breedte: 100px; hoogte: 100px; )

HTML

Voorbeeld

Het binnenste div-element moet een opgegeven breedte (breedte) en hoogte (hoogte) hebben. De methode werkt niet als het buitenste div-element een vaste hoogte heeft.

Centreer de DIV op ondergrens pagina's

Hier marge: auto wordt gebruikt om de div verticaal te centreren en absolute positionering wordt gebruikt extern element. De methode werkt in alle moderne browsers.

CSS

Outer-div ( positie: absoluut; onderkant: 30px; breedte: 100%; ) .inner-div ( marge: 0 auto; breedte: 100px; hoogte: 100px; achtergrondkleur: #ccc; )

HTML

Voorbeeld

Voor de binnenste div moet een breedte zijn ingesteld. De ruimte onderaan de pagina wordt aangepast met behulp van de bottom-eigenschap van de buitenste div. U kunt een div ook bovenaan de pagina centreren door de onderste eigenschap te vervangen door de bovenste eigenschap.

Centreer DIV's verticaal en horizontaal op de pagina

Om de div te centreren, gebruiken we hier opnieuw de marge: automatische en absolute positionering van de buitenste div. De methode werkt in alle moderne browsers.

CSS

Center-div (positie: absoluut; marge: auto; boven: 0; rechts: 0; onder: 0; links: 0; breedte: 100px; hoogte: 100px; )

Voorbeeld

Het div-element moet een breedte (breedte) en hoogte (hoogte) hebben.

Adaptieve centrering van een DIV-element op de pagina maken

Hier voor uitlijning van div In het midden maken we met behulp van CSS de breedte van het div-element adaptief, zodat het reageert op veranderingen in de venstergrootte. Deze methode werkt in alle browsers.

CSS

Midden-div ( marge: 0 automatisch; maximale breedte: 700px; )

Voorbeeld

Voor een gecentreerd div-element moet de eigenschap max-width zijn ingesteld.

Een DIV binnen een element centreren met behulp van de binnenste blokeigenschappen

Het innerlijke div-element is hier responsief. Deze methode om een ​​div binnen een div te centreren werkt in alle browsers.

CSS

Buitenste div (opvulling: 30px; ) .inner-div ( marge: 0 auto; maximale breedte: 700px; )

HTML

Voorbeeld

Voor de binnenste div moet de eigenschap max-width zijn ingesteld.

Twee responsieve div's naast elkaar centreren

Hier hebben we twee responsieve div-elementen naast elkaar. Deze methode om een ​​div in het midden van het scherm te plaatsen werkt in alle moderne browsers.

CSS

Container (tekst uitlijnen: midden; ) .left-div (weergave: inline-blok; maximale breedte: 300px; verticaal uitlijnen: boven; ) .right-div (weergave: inline-blok; maximale breedte: 150px; ) scherm en (max-breedte: 600px) ( .left-div, .right-div ( lef max-breedte: 100%; ) )

HTML

Voorbeeld

Hier hebben we verschillende elementen waarop de eigenschap inline-block is toegepast, gelegen in een gecentreerde container. In dit voorbeeld worden ook CSS-mediaquery's gebruikt; dat wil zeggen: als de schermgrootte kleiner is dan 600 pixels, wordt de eigenschap max-width voor zowel de linker- als de rechterdiv ingesteld op 100%.

DIV-element gecentreerd met Flexbox

Hier centreren we de CSS-div met Flexbox. Het is bedoeld om het ontwerpontwikkelingsproces te vergemakkelijken gebruikersinterfaces. Deze module wordt ondersteund door Chrome 38+, IE11, Microsoft Rand, Firefox 38+ , Safari 9+ , Opera 30+ , iOS-Safari 9+ en ook Android-browser 40+ .

CSS

Container (weergave: flex; align-items: center; justify-content: center; height: 100vh; ) .item ( background-color: #f3f2ef; border-radius: 3px; width: 200px; height: 100px; )

Bij het opmaken van webpagina's is het centreren van blokken heel gebruikelijk. Dit kan verticaal of horizontaal centreren zijn.

Als de site bijvoorbeeld een vaste breedte heeft, zou het rationeel zijn om deze in het midden van het browservenster uit te lijnen, omdat dit maakt de tekst gemakkelijker te lezen (vooral als de monitor groot is). Bij sommige ontwerpen wordt doorgaans het blok in het midden van het browservenster geplaatst, dat wil zeggen zowel verticaal als horizontaal gecentreerd.

Laten we het eerst hebben over horizontale centrering. De meest populaire techniek is om het blok te centreren door de rechter- en linkermarge op "auto" te zetten. Laten we zeggen dat we een blok willen centreren met id = "container" en een breedte van 860px. In dit geval, binnen CSS-bestand je moet schrijven:

#container(
achtergrondkleur: #EEE;
breedte:860px;
marge:0px automatisch;
}

Echter, I.E. oudere versies (5.0 bijvoorbeeld) zullen dit blok niet gecentreerd uitlijnen. Natuurlijk gebruikt niemand zulke oude browsers meer (van de 1800 van mijn dagelijkse bezoekers - slechts 1), maar voor het geval dat, is het beter om het daar ook te laten werken :)

Om dit te doen, moet het bovenliggende element, dat wil zeggen het element waarbinnen we ons blok centreren (meestal is het bovenliggende element de BODY-tag), de parameter text-align:center instellen. In dit geval wordt het blok uitgelijnd op het midden, maar de hele inhoud ervan wordt ook uitgelijnd op het midden, maar dat hebben we niet nodig. Daarom stellen we binnen dit blok de standaarduitlijning in - text-align:left .

body (tekst uitlijnen: gecentreerd)

#container(
achtergrondkleur: #EEE;
breedte:860px;
marge:0px automatisch;
tekst uitlijnen:links;
}

Er is ook een andere manier om een ​​blok horizontaal uit te lijnen, gebaseerd op . Zoals u waarschijnlijk weet, wordt elk blokelement standaard tegen de linkerrand gedrukt ouderelement. Om het op het midden uit te lijnen, hebt u daarom het volgende nodig:

2. Verplaats het naar rechts met 50% van de breedte van het browservenster

3. Gebruik negatieve opvulling en verplaats deze naar links over een afstand gelijk aan de helft van de breedte van het blok.

Op deze manier wordt het blok gecentreerd. Bekijk de onderstaande video voor meer duidelijkheid:

Voorbeeld CSS-code:

#container(
achtergrondkleur:#559964;
positie:absoluut;
links: 50%;
marge-links: -430px;
breedte:860px;
}

Opgemerkt moet worden dat als u een blok niet relatief ten opzichte van het browservenster wilt positioneren, maar bijvoorbeeld relatief ten opzichte van een ander blok, u voor dit andere blok position: relative;

Laten we zeggen dat ons #containerblok, dat gecentreerd moet worden, in het #wrap-blok ligt. Dan ziet de code er als volgt uit:

#wrap(positie:relatief)

#container(
achtergrondkleur:#559964;
positie:absoluut;
links: 50%;
marge-links: -430px;
breedte:860px;
}

Laten we nu eens kijken naar het geval waarin u een blok moet uitlijnen met het midden van de pagina, d.w.z. Pas tegelijkertijd horizontale en verticale centrering toe. Positionering komt hier opnieuw in het spel. Dus we hebben nodig:

1. Zet het blok op absolute positionering

2. Verplaats het 50% naar rechts en 50% naar beneden, waardoor de linkerbovenhoek in het midden van het browservenster wordt geplaatst.

3. Gebruik negatieve opvulling en verplaats deze omhoog over een afstand gelijk aan de helft van de hoogte van het blok, en naar links over een afstand gelijk aan de helft van de breedte van het blok.

Hierdoor wordt het blok in het midden van de webpagina geplaatst.

Laten we zeggen dat de hoogte van ons blok 600 px is en de breedte 860 px. Dan ziet de CSS-code er als volgt uit:

#container(
achtergrondkleur:#559964;
positie:absoluut;
bovenkant:50%;
links: 50%;
marge bovenaan: -300px;
marge-links: -430px;
hoogte:600px;
breedte:860px;
}

Ik hoop dat het principe zelf u duidelijk is.

Beoordeel de les: 1 2 3 4 5

Opmerkingen:

Ik ben de eerste die de les bekijkt!!!

Eh... Ten tweede =) Ik ben dit probleem onlangs tegengekomen in IE, ik heb er lang last van gehad)) Bedankt =)

Bedankt, pagina met bladwijzer)))

Hartelijk dank, Andrey, voor de nieuwe lessen!

Bedankt, ik denk niet dat hier iets aan toe te voegen is))

Bedankt voor de les, ik heb dit een paar dagen geleden letterlijk geprobeerd, had er een beetje last van en heb het tijdelijk terzijde gelegd

Maar ik heb een probleem: de site in Mozille Firefox wil niet uitgelijnd worden, hij zit vast aan de linkerrand en dat is alles, niets van het bovenstaande helpt (hetzelfde in Opera).

waarom werkt dit niet? - "als u een blok niet relatief ten opzichte van het browservenster wilt positioneren, maar bijvoorbeeld relatief ten opzichte van een ander blok, moet u voor dit andere blok positie instellen: relatief;"

Heel erg bedankt!! Gewoon een GROOT dankjewel!

Alles is in orde, maar om de een of andere reden vallen alle afbeeldingen pas op hun plaats na het updaten van de browser. Vertel me alsjeblieft waarom dit gebeurt?

Andrey, voeg een sitezoekopdracht toe.

Voeg een opmerking toe.

Vaak is het bij een lay-out nodig om een ​​element horizontaal en/of verticaal te centreren. Daarom besloot ik er een artikel mee te maken op verschillende manieren gecentreerd zodat alles op één plek bij de hand is.

Horizontale uitlijningsmarge: automatisch

Horizontale uitlijning wanneer marge helpen gebruikt als de breedte van het gecentreerde element bekend is. Werkt voor blokelementen:

Elem (marge-links: auto; marge-rechts: auto; breedte: 50%; )

Als u auto opgeeft voor de rechter- en linkermarge, worden deze gelijk, waardoor het element horizontaal binnen het bovenliggende blok wordt gecentreerd.

tekst uitlijnen: centreren

Deze methode is geschikt voor het centreren van tekst binnen een blok. tekst uitlijnen: centreren:

Uitlijning met tekstuitlijning .wrapper ( tekstuitlijning: centreren; )

Ik ben gecentreerd uitgelijnd

positie en negatieve marge over

Geschikt voor het centreren van blokken met bekende breedte. We geven de positie van het bovenliggende blok: relatief ten opzichte van de positie ten opzichte daarvan, de gecentreerde elementpositie: absoluut, links: 50% en een negatieve marge-links waarvan de waarde gelijk is aan de helft van de breedte van het element:

Uitlijning met behulp van position .wrapper ( position: relatief; ) .wrapper p ( links: 50%; marge: 0 0 0 -100px; position: absoluut; breedte: 200px; )

Ik ben gecentreerd uitgelijnd

weergave: inline-block + tekst-uitlijning: gecentreerd

De methode is geschikt voor het uitlijnen van blokken met een onbekende breedte, maar vereist een wrapper-ouder. U kunt een horizontaal menu bijvoorbeeld op deze manier centreren:

Uitlijning met display: inline-block + tekst-uitlijning: gecentreerd;

• .navigation (tekst uitlijnen: centreren; ) .navigation li (weergave: inline-block; )
• Thuis

Over de auteur

Verticale uitlijning lijnhoogte Om één regel tekst uit te lijnen, kunt u gebruiken dezelfde waarden hoogten en regelafstand

voor het ouderblok. Geschikt voor knoppen, menu-items etc.

lijnhoogte .wrapper ( hoogte: 100px; lijnhoogte: 100px; )

Ik ben verticaal uitgelijnd

positie en negatieve marge omhoog

Een element kan verticaal worden uitgelijnd door het een vaste hoogte te geven en een vaste positie toe te passen: absoluut en een negatieve marge naar boven gelijk aan de helft van de hoogte van het uit te lijnen element. Het ouderblok moet de positie krijgen: relatief:

Wrapper ( positie: relatief; ) elem ( hoogte: 200px; marge: -100px 0 0; positie: absoluut; boven: 50%; )

Op deze manier kunt u met behulp van positionering en negatieve marges een element op de pagina centreren.

weergave: tabelcel

Voor verticale uitlijning wordt de eigenschap display: table-cell op het element toegepast, waardoor het wordt gedwongen een tabelcel te emuleren. We stellen ook de hoogte en verticale uitlijning in: middle . Laten we dit allemaal in een container verpakken met de dislpay: table property; :

lijnhoogte .wrapper ( hoogte: 100px; lijnhoogte: 100px; )

Weergave verticale uitlijning: tabelcel .wrapper (weergave: tabel; breedte: 100%; ) .cell (weergave: tabelcel; hoogte: 100px; verticaal uitlijnen: midden; )

Dynamische uitlijning van een element op een pagina We hebben gekeken naar manieren om elementen op een pagina uit te lijnen CSS-hulp

. Laten we nu eens kijken naar de jQuery-implementatie.

Laten we jQuery verbinden met de pagina: Ik stel voor om te schrijven eenvoudige functie

Functie alignCenter(elem) ( // code hier )

In de hoofdtekst van de functie berekenen en wijzen we dynamisch de coördinaten van het paginacentrum toe aan de CSS-eigenschappen links en bovenaan:

Functie alignCenter(elem) ( elem.css(( links: ($(window).width() - elem.width()) / 2 + "px", boven: ($(window).height() - elem. height()) / 2 + "px" // vergeet niet position: absolute toe te voegen aan het element om coördinaten te activeren )) )

In de eerste regel van de functie krijgen we de breedte van het document en trekken daarvan de breedte van het element af, in tweeën gedeeld - dit is het horizontale midden van de pagina. De tweede regel doet hetzelfde, alleen met hoogte voor verticale uitlijning.

De functie is klaar, het enige dat overblijft is om deze te koppelen aan de DOM-gereedheids- en venstergroottegebeurtenissen:

$(function() ( // roep de centreerfunctie aan wanneer de DOM gereed is alignCenter($(elem)); // roep de functie aan bij het wijzigen van de grootte van het venster $(window).resize(function() ( alignCenter($(elem) )); )) // functie voor centreren van elementen function alignCenter(elem) ( elem.css(( // berekening van de linker- en bovenste coördinaten links: ($(window).width() - elem.width()) / 2 + " px", top: ($(window).height() - elem.height()) / 2 + "px" )) ) ))

Toepassing van Flexbox

Nieuwe CSS3-functies, zoals Flexbox, worden langzamerhand gemeengoed. De technologie helpt bij het maken van markeringen zonder gebruik te maken van floats, positionering, enz. Het kan ook worden gebruikt om elementen te centreren. Pas Flexbox bijvoorbeeld toe op het bovenliggende element.wrapper en centreer de inhoud erin:

Wrapper (weergave: -webkit-box; weergave: -moz-box; weergave: -ms-flexbox; weergave: -webkit-flex; weergave: flex; hoogte: 500px; breedte: 500px; ) .wrapper .content (marge: auto; /* marge: 0 auto; alleen horizontaal */ /* marge: alleen verticaal */ ) Lorem ipsum dolor sit amet

Deze regel centreert het element tegelijkertijd horizontaal en verticaal. De marge werkt nu niet alleen voor horizontale uitlijning, maar ook voor verticale uitlijning. En zonder bekende breedte/hoogte.

Gerelateerde bronnen Help het project

Bij het maken van div-blokken bent u waarschijnlijk situaties tegengekomen waarin u uw div horizontaal en verticaal moet centreren met behulp van pure CSS. Als u bijvoorbeeld pop-ups maakt met . Er zijn verschillende manieren om centrering te implementeren, en in dit artikel deel ik mijn favoriete en gemakkelijkste manieren, met behulp van CSS of jQuery.

Eerst de basis:

Horizontale centrering in CSS

Dit is gemakkelijk te doen, wij gebruiken marge voor onze div blok.

Klassenaam( marge:0 auto; breedte:200px; hoogte:200px; )

Om een ​​div-blok alleen horizontaal te centreren, moet u de breedte van het blok (breedte) definiëren en de auto-eigenschap gebruiken voor de linker- en rechtermarges. Deze methode werkt voor alle blokelementen (div, p, h1, enzovoort...). Voor gebruik horizontale centrering voor inline-elementen (links, afbeeldingen...) moet u de display: block-parameter;

Horizontale en verticale centrering in CSS

Het tegelijkertijd horizontaal en verticaal centreren van een div-blok is iets lastiger. U moet de afmetingen van het div-blok van tevoren weten.

ClassName( breedte:300px; hoogte:200px; positie:absoluut; links:50%; boven:50%; marge:-100px 0 0 -150px; )

Door gebruik te maken van de absolute positionering van een blok kunnen we het losmaken van omringende elementen en de positie ervan bepalen in relatie tot de grootte van het browservenster. Verplaats het div-blok 50% naar links en bovenaan het venster. De linkerbovenhoek van het blok bevindt zich nu in het midden van het browservenster. Het enige dat overblijft is het div-blok in het midden van de pagina te plaatsen door het de helft van de breedte naar links en de helft van de hoogte naar boven te verplaatsen. Hoera! Het resultaat was een uitstekende centrering van het blok pure css code.

Horizontaal en verticaal centreren met jQuery

Zoals eerder vermeld – CSS-methode centreren werkt alleen met vaste afmetingen. Als de afmetingen niet zijn opgegeven, hulp zal komen jQuery-methode:

$(window).resize(function())( $(".className").css(( positie:"absoluut", links: ($(window).width() - $(".className").outerWidth ( ))/2, bovenaan: ($(window).height() - $(".className").outerHeight())/2 )); // Om een ​​functie uit te voeren wanneer het venster geladen is: $(window).resize();

Operatie deze methode is om de functie resize() uit te voeren met behulp van de regel $(window).resize() . Deze functie werkt wanneer het formaat van het browservenster wordt gewijzigd. We gebruiken outsideWidth() en outsideHeight() omdat ze, in tegenstelling tot width() en height() , de opvulling en dikte van de randen bevatten in de grootte die ze retourneren. Laatste regel, start het proces van het centreren van het div-blok wanneer de pagina wordt geladen.

Het voordeel van het gebruik van deze methode is dat u mogelijk niet weet hoe groot de div is. Het grootste nadeel is dat het alleen werkt als JavaScript is ingeschakeld. Daarom is deze methode acceptabel voor multifunctionele interfaces zoals VKontakte, Facebook, enz.

Zoals altijd kunt u uw favoriete methode voor het centreren van blokken voorstellen door commentaar te geven.