passe på siden er ofte nødvendig for å gjøre sentrum justering CSS-måte, for eksempel for å sentrere hovedenheten.Det finnes flere løsninger på dette problemet, som hver vil før eller senere må bruke noen koder.
Strek tekst sentrert
ofte for dekorative formål du ønsker å stille inn tekstjustering av senteret, CSS i dette tilfellet, reduserer tiden for utskyting.Tidligere ble dette gjort ved hjelp av HTML-attributter, nå standarden krever samkjøre tekst ved hjelp av stilark.I motsetning til blokken som du ønsker å endre de ytre marginer, med CSS tekstjustering i midten er laget med en enkelt linje:
- text-align: 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 å gjøre dette, må de være med små bokstaver (for eksempel span) eller line-block (noen blokker som setter eiendommen display: block).Sistnevnte alternativ kan du også endre bredden og høyden av mer fleksibel konfigurasjon av innrykk.
Ofte sidene justere attributt til koden selv.Dette gjør umiddelbart koden ugyldig som W3C erkjente sluttar attributt foreldet.Bruken er ikke anbefalt på siden.
justeringsblokk i sentrum
Hvis du ønsker å spesifisere justeringen av sentrum av div, kan CSS tilby en ganske enkel måte: bruk av ekstern innrykk margin.Padding kan settes som et block-nivå elementer og line-blokken.Svoysva verdien bør settes til 0 (rykkes vertikalt) og auto (automatiske horisontale innrykk):
- margin: 0 auto;
Nå er dette alternativet er anerkjent som absolutt gyldig.Bruke ekstern padding kan du også angi justeringen av sentrum: CSS-margin eiendom gjør at vi kan løse mange problemer knyttet til posisjonering element på siden.
Strek blokk på venstre eller høyre kant
Noen ganger sentrum justering CSS-vei ikke er nødvendig, men det er nødvendig å sette to enheter ved siden av en fra venstresiden og den andre - fra høyre.For denne eiendommen er det en dupp, som kan ta en av tre verdier: venstre, høyre eller ingen.La oss si at du har to enheter som trenger å bli satt sammen.Deretter koden vil være:
- .left {float: left;}
- .right {float: right}
Hvis det er en tredje enhet, som må plasseres under de to første blokkene (f.eks bunnteksten), handu må registrere eiendommen klar:
- .left {float: left;}
- .right {float: right}
- footer {klar: begge}
faktum at blokkene med klassene venstre og høyre faller ut av den totaleflyt, det vil si alle andre elementer ignorert selve eksistensen av elementer justert.Eiendommen klart: både lar bunnteksten eller noen annen enhet for å se falt fra strømnings elementer og forbyr wrap (float) på både venstre og høyre.Derfor, i vårt eksempel, vil bunnteksten gire ned.
Vertikal justering
Det finnes tilfeller hvor utilstrekkelig sett center alignment CSS-måter, må du likevel endre den vertikale plasseringen av barnet blokken.Hvilken som helst linje eller linjeblokkelement kan presses mot den øvre eller nedre kant, som ligger i midten av den overordnede elementet, eller være i en hvilken som helst plass.Oftere krever justering av boksen i sentrum attributtet brukes vertikal-align.Anta at det er to enheter, en inne i en annen.Den interne enhet - line-block element (display: inline-block).Det er nødvendig å justere enheten vertikalt barn:
- justering på den øvre grensen - .child {vertical-align: top};
- sentrum justering - .child {vertical-align: midten};
- justering i den nedre enden - .child {vertical-align: bunn};
på blokknivå elementer eller text-align, eller vertikal-align ikke gjelder.
Mulige problemer med retningsstyrte enheter
Noen ganger div justere midten av CSS-vei kan føre til mindre problemer.For eksempel bruker float: for eksempel, er det tre blokker: .first, .Andre og .third.Den andre og tredje blokker er i den første.Et element med en klasse av andre venstre-justert, og den siste blokk - til høyre.Etter å samkjøre de to falt ut av bekken.Dersom den overordnede ikke er definert høyde (f.eks 30em), vil den ikke lenger strekker høyden av underliggende enheter.For å unngå denne feilen, bruk "spacer" - en spesiell enhet, som ser .Andre og .third.CSS-kode:
- .Andre {float: left}
- .third {float: right}
- .clearfix {Høyde: 0;klar: begge;}
ofte brukt pseudo: etter, noe som også gjør at du kan gå tilbake til blokkene på plass ved å skape psevdorasporki (i dette eksempelet i en div med en klasse av container ligger innenfor .first og inneholder .left og .right):
- .forlot {float: left}
- .right {float: right}
- .container: etter {innhold: '';display: table;klar: begge;}
over alternativer - den mest vanlige, selv om det er noen variasjoner.Du kan alltid finne den enkleste og mest praktiske måten å skape psevdorasporki av eksperimenter.
Et annet problem ofte spurte layout - justering av linjeblokkelementer.Etter hver av dem legges automatisk plass.For å takle denne egenskapen hjelp margin, som er definert av den negative innrykk.Det finnes andre metoder som brukes sjeldnere, for eksempel tilbakestille skriftstørrelsen.I dette tilfellet, egenskapene til den overordnede foreskrevet font-size: 0.Hvis ligger innenfor tekstblokker, har egenskapene til line-blokkelementer returneres til den ønskede størrelse.For eksempel font-size: 1em.Metoden er ikke alltid praktisk, så mye mer hyppig brukt alternativet med ytre marginer.
justeringsblokken lar deg lage vakre og funksjonelle sideoppsett og det er den generelle layout og plassering av varer i butikkene, og bilder på en liten nettside.
