Sentrert: CSS-layout

Når oppsettet av siden er ofte nødvendig å foreta en sentrert CSS-måte, for eksempel å sentrere hovedenheten. Det finnes flere løsninger på dette problemet, som hver vil før eller senere må bruke noen koder.

Juster tekst til sentrum

Ofte for dekorative formål du ønsker å sette teksten sentrert, CSS i dette tilfellet, for å redusere tiden for utskyting. Tidligere ble dette gjort ved hjelp av HTML-attributter, men nå den standard som kreves for å justere teksten med stilark. I motsetning til blokken som du ønsker å endre den eksterne polstring i CSS justeringen av tekst i midten er laget med en enkelt linje:

• tekst-Justering: center;

Denne eiendommen er arvet, og gått fra foreldre til alle barn. Det påvirker ikke bare teksten, men også til andre elementer. For dette formål bør de være små bokstaver (f.eks span) eller rad-blokken (noen blokker som angir skjerm eiendom: block). Det sistnevnte alternativet kan det også mulig å endre bredden og høyden av elementet, mer fleksibel utforming av fordypningen.

sider ofte justere attributt til seg koden. Dette gjør umiddelbart koden ugyldig, siden W3C erkjente justere attributt foreldet. Bruke den på en side er ikke anbefalt.

sentrert blokk

Hvis du ønsker å sette justeringen av div i midten, kan CSS tilby ganske behagelig måte: bruk av eksterne padding margin. Polstring kan spesifiseres som blokkelementer, og linje-blokken. Svoysva verdi skal være 0 (vertikal padding), og auto (automatisk innrykk horisontalt):

• margin: 0 auto;

Nå er dette alternativet er anerkjent som absolutt gyldig. Bruke ekstern padding kan du også sette justeringen av sentrum: CSS-margin hotellet tillater oss å løse mange problemer knyttet til posisjonering element på siden.

Justering av venstre eller høyre kant av blokken

Noen ganger CSS-veis ikke krever justering av sentrum, men det er nødvendig å sette av de neste to blokker, en fra venstresiden og den andre - fra høyre. For dette er det flottøren eiendom, som kan ta en av tre verdier: venstre, høyre eller ingen. La oss si at du har to blokker som skal plasseres ved siden av hverandre. Deretter koden er som følger:

• .left {float: left;}
• .right {float: høyre}

Hvis det er en tredje blokk, som må være plassert under de første to blokker (f.eks bunntekst), så er det nødvendig å registrere klar funksjon:

• .left {float: left;}
• .right {float: høyre}
• bunn {klart: begge}

Det faktum at blokkene med klasser av venstre og høyre faller ut av den totale vannmengden, det vil si alle andre elementer ignorert selve eksistensen av elementer justert. Eiendom klart: både tillater bunnblokk eller en annen synlig utfelt fra strømnings cellene og forbyr wrap (float) på både venstre og høyre. Derfor, i vårt eksempel, er bunnteksten fortrengt nedover.

vertikal justering

Det er tilfeller der det ikke er nok til å sette justeringen av sentrum av CSS-måter, må du også endre den vertikale posisjonen til barnet blokken. Hvilken som helst linje eller rad-blokkelementet kan presses mot den øvre eller nedre kant, som ligger i midten av basiselementet eller være på et vilkårlig sted. De fleste krever ofte justering av midten av blokken, bruker den vertikale-justere attributt. Anta at det er to blokker, en nestet inne i hverandre. I denne innendørsenheten - p-blokkelementet (display: inline-blokk). Det er nødvendig å justere den vertikale blokken barn:

• innretting av den øvre grense - .child {vertikal-Justering: topp};
• sentrert - .child {vertikal Juster på: midten};
• innretting av den nedre kant - .child {vertikal-Justering: bunn};

På blokkelementer audio-tekst justere eller vertikal-Juster ikke gjelder.

Mulige problemer med retningsstyrte enheter

Noen ganger div align midten av CSS-måten kan føre til litt problemer. For eksempel, ved bruk av en flottør, for eksempel, er det tre blokker: .Først, .Andre og .third. Den andre og tredje blokkene ligger i den første. Et element med en annen klasse venstrejustert, og den siste blokk - på høyre side. Etter innretting falt de to fra strømmen. Hvis det overordnede elementet ikke er definert høyde (f.eks 30em), det vil slutte å strekke høyden datterselskap enheter. For å unngå denne feilen, bruk "spacer" - en spesiell enhet, som ser .Andre og .third. CSS-kode:

• .Andre {float: venstre}
• .third {float: høyre}
• .clearfix {høyde: 0; klar: begge;}

pseudo ofte brukt: etter, noe som også gjør det mulig å returnere blokkene på plass ved å skape psevdorasporki (i eksemplet i div med klassen ligger inne i beholderen og omfatter en .first .left og .right):

• .left {float: venstre}
• .right {float: høyre}
• .container: etter {innhold: ''; display: table; klar: begge;}

Alternativene ovenfor - den vanligste, selv om det er noen variasjoner. Du kan alltid finne den enkleste og mest praktiske måten å skape psevdorasporki av eksperimenter.

Et annet problem som ofte opptrer layout - justering av linjeblokkelementer. Etter hver av dem er lagt til en plass automatisk. Håndtere det hjelper margin eiendom, som er definert av den negative innrykk. Det finnes andre måter, som brukes mindre hyppig, for eksempel nullskriftstørrelsen. I dette tilfelle kan egenskapene til moderelementet registrerer font-size: 0. Hvis ligger innenfor tekstblokker, har egenskapene til linje-blokkelementer returneres til den ønskede skriftstørrelsen. For eksempel font-size: 1em. Metoden er ikke alltid praktisk, så det er mye mer vanlig versjon med eksterne marginer.

Justere Blocks lar deg lage vakre og funksjonelle sider: den generelle layout og layout, og plassering av varer i butikkene, og bilder på nettstedet til en liten.