fit på siden er ofte nødvendigt at gøre centret tilpasning CSS-måde: for eksempel at centrere hovedenheden.Der er flere løsninger på dette problem, som hver især vil før eller senere nødt til at bruge enhver coder.
Juster tekst centreret
ofte til dekorative formål, du ønsker at indstille teksten tilpasning af centret, CSS i denne sag, reducerer den tid af indførelse.Tidligere dette blev gjort ved hjælp af HTML-attributter, nu standard kræver tilpasse tekst ved hjælp style sheets.I modsætning til den blok, som du ønsker at ændre de ydre margener, med CSS tekstjustering i midten er lavet med en enkelt linje:
- tekst-align: center;
Ejendommen er nedarvet og bestået fra forældre til alle børn.Det påvirker ikke kun teksten, men også til andre elementer.For at gøre dette, skal de være med små bogstaver (f.eks spændvidde) eller line-blok (eventuelle blokke, der sætter ejendommen display: block).Den sidstnævnte mulighed giver dig også mulighed for at ændre bredden og højden på en mere fleksibel konfiguration af indrykning.
Ofte siderne justere attribut til tag selv.Dette gør straks koden ugyldig som W3C erkendt align attribut forældet.Dens anvendelse anbefales ikke på siden.
opretningsstykke i centrum
Hvis du ønsker at specificere justeringen af midten af div, kan CSS tilbyde en forholdsvis nem måde: brug af ekstern indrykning margin.Padding kan indstilles som et elementer blok-niveau og line-blokken.Svoysva værdi bør sættes til 0 (indrykket lodret) og auto (automatisk vandrette led):
- margin: 0 auto;
nu denne mulighed er anerkendt som absolut gyldig.Brug af ekstern polstring giver dig også mulighed for at angive justeringen af centrum: CSS-margin ejendom giver os mulighed for at løse mange problemer forbundet med positionering element på siden.
Juster blok på venstre eller højre kant
Sommetider center justering CSS-måde er ikke påkrævet, men det er nødvendigt at sætte to enheder ved siden af en fra venstre side og den anden - fra højre.For denne ejendom er der en float, som kan tage en af tre værdier: venstre, højre, eller ingen.Lad os sige du har to enheder, der skal sættes sammen.Så koden vil være:
- .left {float: left;}
- .right {float: højre}
Hvis der er en tredje enhed, som skal placeres under de to første blokke (f.eks sidefoden), hanskal du registrere ejendommen klar:
- .left {float: left;}
- .right {float: højre}
- footer {klart: begge}
faktum, at blokke med klasserne venstre og højre falde ud af den samledeflow, dvs. alle andre elementer ignoreres selve eksistensen af elementer på linie.Ejendommen klar: begge tillader sidefoden eller en anden enhed til at se faldet fra flow elementer og forbyder wrap (float) på både venstre og højre.Derfor, i vores eksempel, vil sidefoden skifte ned.
Lodret justering
Der er tilfælde, hvor utilstrækkelig sæt centreringsmærker CSS-måder, skal du stadig ændre den lodrette placering af barnet blokken.Alle linje eller line-blok element kan presses mod den øverste eller nederste kant, som er placeret i midten af det oprindelige element, eller være i en hvilken som helst sted.Oftere kræver tilpasning af kassen i midten, er denne attribut bruges lodret-align.Antag at der er to enheder, den ene inde i en anden.Den interne enhed - line-block element (display: inline-blok).Det er nødvendigt at tilpasse enheden lodret barn:
- tilpasning til den øvre grænse - .child {lodret-align: top};
- center justering - .child {lodret-align: middle};
- tilpasning i den nedre ende - .child {lodret-align: bund};
om elementer blok-niveau eller tekst-align eller lodret-align ikke anvendelse.
Mulige problemer med justeret enheder
Sommetider div tilpasse midten af CSS-vejs kan forårsage mindre problemer.For eksempel ved hjælp float: for eksempel, er der tre blokke: .first, .second og .third.Den anden og tredje blokke er i den første.Et element med en klasse af anden venstrebundet og den sidste blok - til højre.Efter justering af to faldt ud af åen.Hvis den forælder, der ikke er defineret højde (f.eks 30em), vil det ikke længere strække højden af datterselskaber enheder.For at undgå denne fejl, skal du bruge "spacer" - en særlig enhed, der opfatter .second og .third.CSS-kode:
- .second {float: venstre}
- .third {float: højre}
- .clearfix {height: 0;klart: begge;}
ofte brugt pseudo: efter, hvilket også giver dig mulighed for at vende tilbage til blokkene på plads ved at skabe psevdorasporki (i dette eksempel i en div med en klasse af container ligger inden for .first og indeholder .left og .right):
- .venstre {float: venstre}
- .right {float: højre}
- .container: efter {indhold: '';display: table;klart: begge;}
over muligheder - den mest almindelige, selv om der er nogle variationer.Du kan altid finde den nemmeste og mest bekvemme måde at skabe psevdorasporki af eksperimenter.
andet problem ofte stødt layout - tilpasning af line-block elementer.Efter hver af dem automatisk ekstra plads.For at klare denne egenskab hjælp margin, der er defineret af den negative indrykning.Der er andre metoder, der anvendes mindre hyppigt, f.eks nulstille skriftstørrelsen.I dette tilfælde, egenskaberne af den forælder ordineret font-size: 0.Hvis placeret inden tekstblokke, har egenskaberne af line-block elementer tilbage til den ønskede størrelse.For eksempel, font-size: 1em.Metoden er ikke altid praktisk, så meget mere hyppigt anvendte løsning med eksterne margener.
opretningsstykke giver dig mulighed for at skabe smukke og funktionelle side layout, og det er den generelle layout og placeringen af varer i butikker og fotos på en lille hjemmeside.
