Het blok centreren met behulp van CSS. Horizontale en verticale uitlijning van elementen

Bij het maken van div-blokken bent u waarschijnlijk situaties tegengekomen waarin u uw div horizontaal en verticaal moet centreren met pure CSS. Bijvoorbeeld bij het maken van pop-ups met. Er zijn verschillende manieren om centreren te implementeren, en in dit artikel zal ik mijn favoriete en gemakkelijke manieren delen met CSS of jQuery.

Om te beginnen, de basis:

Horizontaal centreren met CSS

Het is gemakkelijk, we gebruiken marge voor onze div blok.

ClassName (marge: 0 automatisch; breedte: 200px; hoogte: 200px;)

Om het div-blok alleen horizontaal te centreren, moet u de breedte van het blok (breedte) definiëren, gebruik de eigenschap auto voor marges links en rechts... Deze methode werkt voor alle blokelementen (div, p, h1, enzovoort ...). Om horizontale centrering toe te passen voor inline-elementen (links, afbeeldingen ...), moet u de parameter toepassen Scherm:blok;

Horizontaal en verticaal centreren met CSS

Het tegelijkertijd horizontaal en verticaal centreren van het div-blok is iets ingewikkelder. 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 het gebruiken van absoluut door het blok te positioneren, kunnen we het losmaken van de omringende elementen en de positie bepalen in relatie tot de grootte van het browservenster. Verplaats het div-blok naar 50% links en bovenaan het venster. De linkerbovenhoek van het blok bevindt zich nu in het midden van het browservenster. Het blijft om het div-blok in het midden van de pagina in te stellen door het te verplaatsen naar de helft van zijn breedte links en de helft van zijn hoogte omhoog. Hoera! Het resultaat is een uitstekende centrering van het blok in pure css-code.

Horizontaal en verticaal centreren met jQuery

Zoals eerder vermeld - CSS-centreermethode werkt alleen met vaste afmetingen. Als de afmetingen niet zijn opgegeven, komt de jQuery-methode te hulp:

$ (venster) .resize (functie () ($ (". className"). css ((positie: "absolute", links: ($ (venster) .width () - $ (". className"). outerWidth ( )) / 2, boven: ($ (venster) .height () - $ (". ClassName"). OuterHeight ()) / 2));)); // Om de functie uit te voeren wanneer het venster is geladen: $ (window) .resize ();

De werking van deze methode is om de functie formaat wijzigen () uit te voeren met behulp van de regel $ (venster) .resize ()... Deze functie werkt wanneer het formaat van het browservenster wordt gewijzigd. We gebruiken buitenste Breedte () en buitensteHoogte () want in tegenstelling tot breedte () en hoogte (), ze bevatten de opvulling en breedte van de randen in de grootte die ze retourneren. De laatste regel begint het proces van het centreren van het div-blok bij het laden van de pagina.

Het voordeel van het gebruik van deze methode is dat u misschien niet weet hoe groot het div-blok is. Het belangrijkste nadeel zijn de prestaties alleen met JavaScript ingeschakeld. Daarom is deze methode acceptabel voor multifunctionele interfaces zoals Vkontakte, Facebook, enz.

Het horizontaal en verticaal uitlijnen van elementen kan op verschillende manieren. De keuze van de methode hangt af van het type element (blok of inline), van het type positionering, afmetingen, etc.

1. Horizontale uitlijning naar het midden van het blok / de pagina

1.1. Als het blok een breedte heeft:

Als u een inline-element op deze manier wilt uitlijnen, moet het worden ingesteld om weer te geven: block;

1.2. Als het blok in een ander blok is genest en er geen breedte voor is ingesteld / ingesteld:

1.3. Als het blok een breedte heeft en in het midden van het bovenliggende blok moet worden bevestigd:

1.4. Als er geen breedte is opgegeven voor de blokken, kunt u centreren met behulp van het bovenliggende wrapperblok:

2. Verticale uitlijning

2.1. Als de tekst één regel beslaat, bijvoorbeeld voor knoppen en menu-items:

2.2. Een blok verticaal uitlijnen binnen een bovenliggend blok:

2.3. Verticale uitlijning per tabeltype:

2.4. Als een blok een breedte en hoogte heeft en gecentreerd moet worden op het bovenliggende blok:

2.5. Absolute positionering in het midden van de pagina / het blok met behulp van CSS3-transformaties:

als het element gedimensioneerd is

als het element geen maat heeft en niet leeg is

Bij het ontwerpen van uw webpagina-indeling bent u waarschijnlijk een situatie tegengekomen waarin u een div horizontaal en verticaal moet centreren met behulp van CSS. Er zijn verschillende manieren om CSS en JQuery te gebruiken.

Maar eerst de basis:

Horizontale uitlijning met CSS

Naam van de klasse (
marge: 0 automatisch;
breedte: 200px;
hoogte: 200px;
}

Om de div alleen horizontaal te centreren, moet u de breedte en automatische waarde voor de linker- en rechtermarges specificeren (dit is een afkorting voor het schrijven van CSS-eigenschappen). Deze methode werkt op blokelementen (div, p, h1, etc.). Om het toe te passen op lineaire elementen (bijvoorbeeld hyperlinks en afbeeldingen), moet u een andere regel schrijven - weergave: blok.

Horizontale en verticale uitlijning met CSS

Het tegelijkertijd horizontaal en verticaal centreren van de div is iets lastiger. U moet vooraf de afmetingen van de div weten.

Naam van de klasse (
breedte: 300px;
hoogte: 200px;
positie: absoluut;
links: 50%;
boven: 50%;
marge: -100px 0 0 -150px;
}

Met de absolute positionering van elementen kunnen we het uit de stream halen en de positie instellen ten opzichte van het browservenster. Door de offset van de div in te stellen op 50% vanaf de linker- en bovenkant van het venster, centreren we de linkerbovenhoek ten opzichte van de pagina. Het enige dat we nog moeten doen, is de div naar links en naar boven verplaatsen met de helft van de breedte en hoogte, waardoor deze negatieve marges krijgt, zodat deze perfect gecentreerd is.

Horizontale en verticale uitlijning met jQuery

Zoals vermeld, werkt de bovenstaande CSS-methode alleen met divs met een vaste grootte. JQuery komt te hulp:

// functieverklaring:
$ (venster) .resize (functie () (
$ (". klassenaam"). css ((
positie: "absoluut",
links: ($ (venster) .width () - $ (". class-name"). outerWidth ()) / 2,
top: ($ (venster) .height () - $ (". class-name"). outerHeight ()) / 2
});
});
// functie oproep:
$ (venster) .resize ();

De functie berekent de breedte van het venster in $ (window) .resize () telkens wanneer de gebruiker de grootte van het venster aanpast. We gebruiken outerWidth () en outerHeight () omdat ze, in tegenstelling tot normale breedte () en hoogte (), opvulling en randbreedte toevoegen, waardoor de grootte wordt geretourneerd. Ten slotte passen we het formaat van het venster aan en centreren we de div bij het opnieuw laden van de pagina.

Bij het opmaken van een pagina is het vaak nodig om centre uitlijning op een CSS-manier uit te voeren: centreer bijvoorbeeld het hoofdblok. Er zijn verschillende opties om dit probleem op te lossen, die elk vroeg of laat door elke lay-outontwerper moeten worden gebruikt.

Tekst centreren

Vaak moet u voor decoratieve doeleinden de tekstuitlijning in het midden instellen, met CSS kunt u in dit geval de zettijd verkorten. Voorheen werd dit gedaan met behulp van HTML-attributen, maar nu vereist de standaard tekstuitlijning met behulp van stylesheets. In tegenstelling tot vakken, waarvoor u de marges moet wijzigen, wordt in CSS de centrale uitlijning van tekst gedaan met een enkele regel:

• tekst uitlijnen: midden;

Deze eigenschap wordt geërfd en doorgegeven van de ouder aan alle nakomelingen. Heeft niet alleen invloed op de tekst, maar ook op andere elementen. Om dit te doen, moeten ze inline zijn (bijvoorbeeld span) of inline-block (alle blokken met de weergave: block-eigenschap ingesteld). Met de laatste optie kunt u ook de breedte en hoogte van het element wijzigen, de inspringingen flexibeler aanpassen.

Vaak wordt op pagina's uitlijnen toegeschreven aan de tag zelf. Dit maakt de code onmiddellijk ongeldig, omdat het align-attribuut door de W3C is afgeschaft. Het wordt niet aanbevolen om het op de pagina te gebruiken.

Een blok uitlijnen op het midden

Als je de div wilt centreren, kan CSS een behoorlijk handige manier bieden om dit te doen: gebruik marges. Inspringingen kunnen worden ingesteld voor zowel blokelementen als inline-blokelementen. De eigenschapswaarde moet de waarden 0 (verticale inspringingen) en auto (automatische horizontale inspringingen) aannemen:

• marge: 0 automatisch;

Nu wordt deze specifieke optie als absoluut geldig erkend. Door externe inspringingen te gebruiken, kunt u ook de middenuitlijning van de afbeelding instellen: u kunt veel problemen oplossen die verband houden met het positioneren van een element op de pagina.

Een blok naar links of rechts uitlijnen

Soms is CSS-gecentreerde uitlijning niet vereist, maar moet u twee blokken naast elkaar plaatsen: de ene aan de linkerkant, de andere aan de rechterkant. Om dit te doen, is er de eigenschap float, die een van de drie waarden kan aannemen: links, rechts of geen. Laten we zeggen dat je twee blokken hebt die naast elkaar moeten worden geplaatst. Dan ziet de code er als volgt uit:

• .links (zwevend: links;)
• .rechts (zwevend: rechts)

Als er ook een derde blok is dat zich onder de eerste twee blokken moet bevinden (bijvoorbeeld een voettekst), dan moet deze de eigenschap clear registreren:

• .links (zwevend: links;)
• .rechts (zwevend: rechts)
• voettekst (duidelijk: beide)

Het feit is dat blokken met klassen links en rechts uit de algemene stroom vallen, dat wil zeggen dat alle andere elementen het bestaan ​​​​van uitgelijnde elementen negeren. De duidelijke: beide eigenschappen zorgen ervoor dat de footer of een ander blok uitstroomelementen kan zien en verbiedt floats naar zowel links als rechts. Daarom wordt in ons voorbeeld de voettekst naar beneden verplaatst.

Verticale uitlijning

Soms is het niet voldoende om de middenuitlijning in te stellen met behulp van CSS-methoden, u moet ook de verticale positie van het onderliggende blok wijzigen. Elk inline- of inline-blokelement kan worden vastgemaakt aan de boven- of onderrand, in het midden van het bovenliggende element of waar dan ook. Meestal is uitlijning van het blok in het midden vereist, hiervoor wordt het attribuut vertical-align gebruikt. Laten we zeggen dat er twee blokken zijn, de ene genest in de andere. In dit geval is het binnenblok een inline-blokelement (weergave: inline-blok). U moet het onderliggende blok verticaal uitlijnen:

• top uitlijning - .child (vertical-align: top);
• centreeruitlijning - .child (verticaal uitlijnen: midden);
• onderste uitlijning - .child (vertical-align: bottom);

Noch tekst-uitlijning, noch verticale uitlijning heeft invloed op blokelementen.

Mogelijke problemen met uitgelijnde blokken

Soms kan het op een CSS-manier uitlijnen van een div naar het midden kleine problemen veroorzaken. Als u bijvoorbeeld float gebruikt: laten we zeggen dat er drie blokken zijn: .first, .second en .third. Het tweede en derde blok bevinden zich in het eerste. Het element met klasse tweede is links uitgelijnd en het laatste blok is rechts uitgelijnd. Na het uitlijnen vielen beide uit de stroom. Als het bovenliggende element geen gespecificeerde hoogte heeft (bijvoorbeeld 30em), stopt het met uitrekken langs de hoogte van de onderliggende blokken. Om deze fout te voorkomen, gebruikt u een "spacer" - een speciaal blok dat .second en .third ziet. CSS-code:

• .seconde (zwevend: links)
• .derde (zwevend: rechts)
• .clearfix (hoogte: 0; duidelijk: beide;)

De: after pseudo-klasse wordt vaak gebruikt, waarmee je ook blokken terug kunt plaatsen door een pseudo-lay-out te maken (in het voorbeeld ligt een div met een containerklasse binnen .first en bevat .left en .right):

• .links (zwevend: links)
• .rechts (zwevend: rechts)
• .container: na (inhoud: ""; weergave: tabel; wissen: beide;)

Bovenstaande opties zijn de meest voorkomende, hoewel er verschillende variaties zijn. Je kunt altijd de gemakkelijkste en handigste manier vinden om een ​​pseudo-lay-out te maken door te experimenteren.

Een ander probleem waarmee lay-outontwerpers vaak worden geconfronteerd, is de uitlijning van inline-blokelementen. Na elk ervan wordt automatisch een spatie toegevoegd. De marge-eigenschap helpt om hiermee om te gaan, die is ingesteld op een negatieve marge. Er zijn andere methoden die veel minder vaak worden gebruikt: bijvoorbeeld zeroing. In dit geval wordt font-size: 0 geschreven in de eigenschappen van het bovenliggende element. Als er tekst in de blokken staat, wordt de vereiste lettergrootte al geretourneerd in de eigenschappen van inline-blokelementen. Bijvoorbeeld lettergrootte: 1em. De methode is niet altijd handig, daarom wordt de optie met externe inspringingen veel vaker gebruikt.

Door blokken uit te lijnen, kunt u mooie en functionele pagina's maken: dit is de lay-out van de algemene lay-out en de locatie van goederen in online winkels en foto's op een visitekaartjesite.

In CSS zijn sommige schijnbaar eenvoudige dingen niet gemakkelijk te bereiken. Een van deze dingen is uitlijning, d.w.z. wanneer een element op een bepaalde manier moet worden gepositioneerd ten opzichte van een ander.

Dit artikel presenteert enkele kant-en-klare oplossingen die het werk van centreerelementen horizontaal en / of verticaal zullen helpen vereenvoudigen.

Let op: onder elke oplossing staat een lijst met browsers met een indicatie van de versies waarin de opgegeven CSS-code werkt.

CSS - Een blok centreren

1. Lijn een blok uit met het midden van een ander. In dit geval hebben de eerste en tweede blokken dynamische afmetingen.

Parent (positie: relatief;) .child (positie: absoluut; links: 50%; top: 50%; -webkit-transform: translate (-50%, -50%); -moz-transform: translate (-50% , -50%); -ms-transform: vertalen (-50%, -50%); -o-transform: vertalen (-50%, -50%); transformeren: vertalen (-50%, -50%) ;)

• Chrome 4.0+
• Firefox 3.6+
• Internet Explorer 9+
• Opera 10.5+
• Safari 3.1+

2. Lijn een blok uit met het midden van een ander. In dit geval heeft het tweede blok vaste afmetingen.

Parent (positie: relatief;) .child (positie: absoluut; links: 50%; boven: 50%; / * 2 blokken breedte en hoogte * / breedte: 500px; hoogte: 250px; / * Waarden worden bepaald op basis van zijn grootte * / / * margin-left = - breedte / 2 * / margin-left: -250px; / * margin-top = - hoogte / 2 * / margin-top: -125px;)

Browsers die deze oplossing ondersteunen:

• Chroom 1.0+
• Firefox 1.0+
• Internet Explorer 4.0+
• Opera 7.0+
• Safari 1.0+

3. Lijn een blok uit met het midden van een ander. In dit geval heeft het tweede blok afmetingen die als percentage zijn gespecificeerd.

Parent (positie: relatief;) .child (positie: absoluut; / * breedte en hoogte van 2 blokken in% * / hoogte: 50%; breedte: 50%; / * De waarden worden bepaald op basis van de grootte in% * / links: 25%; / * (100% - breedte) / 2 * / boven: 25%; / * (100% - hoogte) / 2 * /)

Browsers die deze oplossing ondersteunen:

• Chroom 1.0+
• Firefox 1.0+
• Internet Explorer 4.0+
• Opera 7.0+
• Safari 1.0+

CSS - Horizontale uitlijning

1. Uitlijning van een blokelement (weergave: blok) ten opzichte van een ander (waarin het zich bevindt) horizontaal:

Blokkeren (marge-links: auto; marge-rechts: auto;)

Browsers die deze oplossing ondersteunen:

• Chroom 1.0+
• Firefox 1.0+
• Internet Explorer 6.0+
• Opera 3.5+
• Safari 1.0+

2. Een inline (display: inline) of inline-block (display: inline-block) element horizontaal uitlijnen:

Bovenliggende (tekstuitlijning: midden;) .kind (weergave: inline-blok;)

Browsers die deze oplossing ondersteunen:

• Chroom 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

CSS - Verticale uitlijning

1. Centreer één element (display: inline, display: inline-block) ten opzichte van het andere (waarin het zich bevindt) in het midden. Het bovenliggende vak in dit voorbeeld heeft een vaste hoogte, die wordt ingesteld met behulp van de CSS-eigenschap line-height.

Bovenliggende (regelhoogte: 500px;) .child (weergave: inline-blok; verticaal uitlijnen: midden;)

Browsers die deze oplossing ondersteunen:

• Chroom 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

2. Het ene blok verticaal centreren ten opzichte van het andere door het bovenliggende blok weer te geven als een tabel en het kind als de cellen van deze tabel.

Bovenliggende (weergave: tabel;) .child (weergave: tabelcel; verticaal uitlijnen: midden;)

Browsers die deze oplossing ondersteunen:

• Chroom 1.0+
• Firefox 1.0+
• Internet Explorer 8.0+
• Opera 7.5+
• Safari 1.0+

Als je nog andere interessante trucs of handige kant-en-klare uitlijningsoplossingen kent, deel ze dan in de reacties.