fit op de pagina moet vaak het centrum CSS-aanpassing te maken: bijvoorbeeld om het apparaat te centreren.Er zijn verschillende oplossingen voor dit probleem, die elk vroeg of laat één coder gebruiken.
uitlijnen tekst gecentreerd
vaak voor decoratieve doeleinden u de tekst wilt uitlijnen van het centrum, CSS in dit geval vermindert de tijd van het opleggen.Voorheen werd dit gedaan met behulp van HTML-attributen, nu standaard vereist uitlijnen van tekst met behulp van style sheets.In tegenstelling tot het blok waarvoor u naar de buitenste marges te veranderen, met CSS tekstuitlijning in het midden is gemaakt met een enkele regel:
- text-align: center;
Deze eigenschap wordt overgenomen en doorgegeven van ouder op alle kinderen.Het beïnvloedt niet alleen tekst, maar ook voor andere elementen.Om dit te doen, moeten ze in kleine letters (bijvoorbeeld overspanning) of lijn-blok (alle blokken die de eigenschap weergave sets: block).De laatste optie kunt u ook de breedte en hoogte van meer flexibele configuratie van de insprong veranderen.
Vaak is de pagina's af te stemmen toe aan de tag zelf.Dit maakt meteen de code ongeldig W3C erkend align attribuut achterhaald.Het gebruik ervan is niet aan te raden op de pagina.
uitrichtingsblok in het centrum
Als u de uitlijning van het midden van het div opgeeft, kan CSS een vrij eenvoudige manier bieden: gebruik van externe inspringen marge.Padding kan worden ingesteld als een block-level elementen en line-blok.Svoysva waarde moet worden ingesteld op 0 (ingesprongen verticaal) en auto (automatische horizontale streepjes):
- margin: 0 auto;
Nu deze optie wordt gezien als absoluut geldig.Met behulp van externe padding kunt u ook de uitlijning van het centrum te geven: CSS-marge eigenschap kunnen we veel problemen in verband met de positionering element op de pagina te lossen.
Lijn blok aan de linker of rechter rand
Soms is het centrum uitlijning CSS-weg is niet vereist, maar is het noodzakelijk om twee eenheden die naast één van de linkerkant en de andere - van rechts.Voor deze woning is er een vlotter, die één van de drie waarden kan aannemen: links, rechts, of geen.Laten we zeggen dat je twee eenheden die moeten worden samengevoegd.Dan zal de code:
- .left {float: left;}
- .right {float: right}
Als er een derde eenheid, die onder de eerste twee blokken (bijv, de voettekst) moet worden geplaatst, is hij
- .left: u moet de eigenschap duidelijk registreren {float: left;}
- .right {float: right}
- voettekst {duidelijk: zowel}
feit dat de blokken met de klassen links en rechts vallen van de in totaalvloeien, dat wil zeggen alle andere elementen genegeerd het bestaan van elementen uitgelijnd.Het pand duidelijk: zowel maakt de voettekst of een andere eenheid zien daalde van de stroom elementen en verbiedt wrap (float) zowel links en rechts.Daarom is in ons voorbeeld, zal de voettekst terugschakelen.
Verticale uitlijning
Er zijn gevallen waarin onvoldoende set centrum uitlijning CSS-manieren, je moet nog steeds de verticale positie van het kind blok veranderen.Elke lijn of lijn-blok element kan worden gedrukt tegen de bovenste of onderste rand, gelegen in het midden van het bovenliggende element, of in elke plaats.Vaker uitlijning van de doos in het centrum nodig heeft, wordt deze eigenschap gebruikt vertical-align.Stel dat er twee eenheden, een in elkaar.De interne eenheid - line-block element (display: inline-block).Het is noodzakelijk om het apparaat verticaal kind uitlijnen:
- aanpassing aan de bovengrens - .child {vertical-align: top};
- centrum uitlijning - .child {vertical-align: midden};
- uitlijning aan de onderkant - .child {vertical-align: bottom};
op block-level elementen of text-align of vertical-align niet van toepassing.
Mogelijke problemen met uitgelijnde eenheden
Soms div align het centrum van de CSS-manier kunnen kleine problemen veroorzaken.Bijvoorbeeld met behulp van float: bijvoorbeeld, zijn er drie blokken: .Eerst, .second en .third.De tweede en derde blokken in de eerste.Een element met een klasse van de tweede weg links uitgelijnd, en het laatste blok - aan de rechterkant.Na het uitlijnen van de twee viel uit de beek.Als de ouder niet gedefinieerd hoogte (bijvoorbeeld 30em), zal het niet langer 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;}
vaak gebruikt pseudo: na, die ook stelt u in staat om terug te keren naar de blokken op zijn plaats door het creëren van psevdorasporki (in dit voorbeeld in een div met een klas van de verpakking ligt binnen de .Eerst en bevat .left en .right):
- .linker {float: left}
- .right {float: right}
- .container: na {inhoud: '';weergave: table;clear: both;}
bovenstaande opties - de meest voorkomende, hoewel er enkele variaties.U kunt altijd de gemakkelijkste en meest handige manier om psevdorasporki maken door experimenten.
ander probleem voorkomende layout - uitlijning van de lijn-blok elementen.Na elk daarvan automatisch extra ruimte.Om te gaan met deze eigenschap hulp marge, die wordt gedefinieerd door de negatieve inspringen.Er zijn andere methoden die minder frequent worden gebruikt, bijvoorbeeld, het resetten van de lettergrootte.In dit geval is de eigenschappen van de ouder voorgeschreven font-size: 0.Als zich binnen blokken tekst zijn de eigenschappen van de lijn-block elementen terug naar de gewenste grootte.Bijvoorbeeld font-size: 1em.De werkwijze is niet altijd handig, zo veel vaker gebruikte optie met externe marges.
uitrichtingsblok kunt u mooie en functionele pagina-indeling te maken en het is de algemene lay-out en de locatie van goederen in de winkels, en foto's op een kleine website.
