Centered: CSS-lay-out

Als de lay-out van de pagina is vaak nodig om een gecentreerde CSS-plaats te maken: bijvoorbeeld om het apparaat te centreren. Er zijn verschillende oplossingen voor dit probleem, die elk zullen vroeg of laat aan een coder te gebruiken.

Tekst uitlijnen naar het centrum

Vaak voor decoratieve doeleinden u de tekst gecentreerd, CSS Stel in dit geval, om de tijd van het opleggen verminderen. Voorheen werd dit gedaan met behulp van HTML-attributen, maar nu is de norm die de tekst met de style sheet te lijnen. In tegenstelling tot het blok waarvoor u naar de externe padding in CSS uitlijning van tekst in het midden is gemaakt met een enkele regel te wijzigen:

• text-align: center;

Deze eigenschap wordt geërfd en doorgegeven van ouder op alle kinderen. Het beïnvloedt niet alleen de tekst, maar ook voor andere elementen. Hiertoe moeten zij worden kleine letters (bijvoorbeeld overspanning) of rij-blok (alle blokken die weergeefeigenschap specificeren: block). De laatste optie kunt u ook de breedte en hoogte van het element, flexibelere vormgeving van de uitsparing wijzigen.

pagina's af te stemmen vaak attribuut om zichzelf de tag. Dit maakt meteen de code ongeldig is, omdat W3C erkend align attribuut achterhaald. Met behulp van het op een pagina wordt niet aanbevolen.

centered blok

Wilt u de uitlijning van de div in het midden ingesteld, kan CSS nogal een comfortabele manier te bieden: het gebruik van externe padding marge. Padding kunnen als de blokelementen en lijn-blok. Svoysva waarde moet 0 (verticaal vulling) en auto (automatische inspringen horizontaal):

• margin: 0 auto;

Nu is deze optie wordt gezien als absoluut geldig. Gebruik van externe padding kunt u ook de uitlijning van het centrum in te stellen: CSS-marge eigenschap stelt ons in staat om veel problemen in verband met de positionering element op de pagina op te lossen.

Uitlijning van de linker of rechter rand van het blok

Soms CSS-way niet uitlijning van het centrum nodig hebben, maar het is noodzakelijk om de volgende twee blokken, één aan de linkerkant en de andere te zetten - van rechts. Hiervoor is de eigenschap float, die een van de drie waarden kan aannemen: links, rechts of geen. Laten we zeggen dat je twee blokken die kant moet worden geplaatst elkaar. Dan is als volgt de code:

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

Als er een derde blok, dat in de eerste twee blokken (bijvoorbeeld footer) moet worden geplaatst, is het noodzakelijk duidelijke functie registreren:

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

Het feit dat de blokken met de klassen linker en rechter uitvallen van de totale stroom, dat wil zeggen alle andere elementen genegeerd het bestaan van elementen uitgelijnd. Property clear: both maakt footer blok of andere zichtbare geprecipiteerd uit de doorstroomcellen en verbiedt wrap (float) zowel links en rechts. Daarom, in ons voorbeeld, de footer naar beneden verplaatst.

vertical alignment

Er zijn gevallen waarin niet voldoende om de uitlijning van het midden van de CSS-wegen te stellen, moet u ook de verticale positie van het kind blok te veranderen. Elke lijn of rij-blokelement kan tegen de boven- of onderrand worden gedrukt, in het midden van het bovenliggende element of in een willekeurige locatie. vereisen Meestal uitlijning van het midden van het blok, gebruikt het vertical-align attribuut. Stel dat er twee blokken, één genest binnen de ander. In deze binneneenheid - tr-blokelement (display: inline-block). Er moet de verticale blok kind uitlijnen:

• aanpassing van de bovengrens - .child {vertical-align: top};
• centered - .child {vertical-align: middle};
• aanpassing van de onderrand - .child {vertical-align: bottom};

Bij blokelementen audio text-align, of vertical-align niet van toepassing.

Mogelijke problemen met de uitgelijnde eenheden

Soms div align het centrum van de CSS-way kan problemen veroorzaken. Bijvoorbeeld, bij het gebruik van een vlotter: bijvoorbeeld, zijn er drie blokken: .Eerst, .second en .third. De tweede en derde blokken liggen de eerste. Een element met een tweede klasse links uitgelijnd en het laatste blok - rechts. Na het uitlijnen van de twee viel uit de stroom. Wanneer het bovenliggende element niet bepaalde hoogte (bijvoorbeeld 30em), zal ophouden de hoogte van subsidiaire eenheden rekken. Om deze fout te voorkomen, gebruikt u de "spacer" - een speciale eenheid, die ziet .second en .third. CSS-code:

• .second {float: left}
• .third {float: right}
• .clearfix {height: 0; clear: both;}

pseudo vaak gebruikt: daarna, waarmee ook de blokken op hun plaats terug door het creëren psevdorasporki (in het voorbeeld in de div met klasse ligt binnen de houder en omvat een .Eerst .left en .right):

• .left {float: left}
• .right {float: right}
• .container: na {inhoud: ''; -display: table; clear: both;}

De bovenstaande opties - de meest voorkomende, maar er zijn een aantal variaties. U kunt de gemakkelijkste en meest handige manier om psevdorasporki maken door experimenten altijd.

Een ander probleem voorkomende layout - aanpassing van de lijn-blokelementen. Na elk van deze ruimte automatisch wordt toegevoegd. Behandel het helpt het pand marge, die wordt gedefinieerd door de negatieve inspringen. Er zijn andere manieren, die minder vaak worden gebruikt, bijvoorbeeld, reset de lettergrootte. In dit geval zijn de eigenschappen van de ouderelement registreert font-size: 0. Zijn tot minimaal tekstblokken, zijn de eigenschappen van de lijn-blokelementen teruggestuurd naar de gewenste lettergrootte. Bijvoorbeeld, font-size: 1em. De methode is niet altijd handig, dus het is veel vaker gebruikt uitvoering met externe marges.

Uitlijnen Blocks kunt u mooie en functionele pagina's te maken: de algemene lay-out en de lay-out, en de locatie van goederen in de winkels, en foto's op de site van een kleine.