Middenuitlijning: CSS-lay-out

Wanneer pagina-indeling vaak nodig is om te makencentreer de uitlijning op een CSS-manier: centreer bijvoorbeeld het hoofdblok. Er zijn verschillende opties om dit probleem op te lossen, die elk vroeg of laat door elke letterzetter moeten worden gebruikt.

Tekst naar midden uitlijnen

Vaak moet u voor decoratieve doeleinden vragentekstuitlijning in het midden, CSS kan in dit geval de lay-outtijd verkorten. Voorheen gebeurde dit met HTML-attributen, maar nu vereist de standaard dat tekst wordt uitgelijnd met behulp van stijlbladen. In tegenstelling tot blokken waarvoor u de buitenste marges moet wijzigen, wordt in CSS tekstuitlijning in het midden uitgevoerd met behulp van een enkele regel:

• text-align: center;

Deze eigenschap is overgenomen en doorgegeven van de ouder.aan alle nakomelingen. Het beïnvloedt niet alleen de tekst, maar ook andere elementen. Om dit te doen, moeten ze kleine letters zijn (bijvoorbeeld spanwijdte) of kleine letters (alle blokken waarvoor de eigenschap display: block is ingesteld). Met de laatste optie kunt u ook de breedte en hoogte van het element wijzigen en de inspringing flexibeler aanpassen.

Vaak wordt op pagina's uitlijnen toegeschreven aan de tag zelf. Dit maakt de code onmiddellijk ongeldig omdat de W3C het kenmerk align overbodig heeft gemaakt. Het wordt niet aanbevolen om het op een pagina te gebruiken.

Uitlijning middenblok

Als u de uitlijning van de div in het midden moet instellen, CSSbiedt een redelijk gemakkelijke manier: externe marge-inspringen gebruiken. Inspringing kan worden ingesteld op zowel blokelementen als lijnblok. De eigenschapswaarde moet de waarden 0 (verticale inspringing) en auto (automatische horizontale inspringing) hebben:

• marge: 0 auto;

Nu wordt precies deze optie absoluut herkendgeldig. Met inspringen kunt u ook de uitlijning van de afbeelding in het midden instellen: met de eigenschap CSS-marge kunt u veel problemen oplossen bij het plaatsen van een element op de pagina.

Links of rechts blokuitlijning

Soms is centreren op een CSS-manier nietvereist, maar u moet twee blokken naast elkaar plaatsen: een vanaf de linkerrand, de andere vanaf de rechterkant. Om dit te doen, is er een float-eigenschap die een van drie waarden kan hebben: links, rechts of geen. Stel dat u twee blokken naast elkaar moet plaatsen. Dan ziet de code er als volgt uit:

• .left {float: left;}
• .right {float: right}

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

• .left {float: left;}
• .right {float: right}
• footer {clear: both}

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

Verticale uitlijning

Er zijn momenten waarop het niet genoeg is om te vragencentreren uitlijning op CSS-manieren, u moet nog steeds de verticale positie van het onderliggende blok wijzigen. Elk inline- of inline-blockelement kan tegen de boven- of onderkant worden gedrukt, in het midden van het bovenliggende element, of op een willekeurige plaats. Meestal is uitlijning van het blok in het midden vereist; hiervoor wordt het kenmerk verticaal uitlijnen gebruikt. Stel dat er twee blokken zijn, de ene genest in de andere. In dit geval is het interne blok een lijnblokelement (weergave: inline-blok). Het is noodzakelijk om het onderliggende blok verticaal uit te lijnen:

• top alignment - .child {vertical-align: top};
• centrumuitlijning - .child {vertical-align: middle};
• onderste uitlijning - .child {vertical-align: bottom};

Tekstuitlijning noch verticale uitlijning beïnvloeden blokelementen.

Mogelijke problemen met uitgelijnde blokken

Soms wordt een div op een CSS-manier gecentreerdkan 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 staan ​​in het eerste. Een element met klasse second is links uitgelijnd en het laatste blok is rechts uitgelijnd. Na het nivelleren vielen beide uit de stroom. Als het ouderelement geen hoogte heeft (bijvoorbeeld 30em), stopt het met uitrekken over 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:

• .second {float: left}
• .third {float: right}
• .clearfix {hoogte: 0; clear: beide;}

Vaak gebruikte pseudoklasse:daarna, waarmee je ook de blokken op hun plaats kunt terugzetten door een pseudo-splitter te maken (in het voorbeeld in de div met de klassecontainer, het ligt binnen. first en bevat .left en .right):

• .left {float: left}
• .right {float: right}
• .container: after {content: ""; display: tafel; clear: beide;}

De bovenstaande opties zijn de meest voorkomende, hoewel er verschillende variaties zijn. U kunt altijd de eenvoudigste en handigste manier vinden om pseudo-monsters te maken door te experimenteren.

Een ander probleem kwam vaak voortypesetters, - uitlijning van lijnblokelementen. Na elk van hen wordt automatisch een spatie toegevoegd. De eigenschap margin, die is ingesteld op een negatief streepje, helpt hier mee om te gaan. Er zijn andere manieren die veel minder vaak worden gebruikt: bijvoorbeeld het opnieuw instellen van de lettergrootte. In dit geval wordt de tekengrootte: 0 opgegeven in de eigenschappen van het bovenliggende element. Als de tekst zich binnen de blokken bevindt, wordt de gewenste lettergrootte al geretourneerd in de eigenschappen van inline-block-elementen. Bijvoorbeeld, lettergrootte: 1em. De methode is niet altijd handig, daarom wordt de optie met inspringen veel vaker gebruikt.

Door blokken uit te lijnen, kunt u prachtige 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.