Centerjustering: CSS layout

Internettet

Når du laver en side, skal du oftecenterjustering på en CSS-måde: For eksempel centrere hovedenheden. Der er flere måder at løse dette problem på, som hver for sig skal bruges af en layout designer.

Juster teksten til midten

Ofte til dekorative formål, skal du angivetekstjustering i midten, giver CSS i dette tilfælde dig mulighed for at reducere layouttiden. Tidligere blev dette gjort ved hjælp af HTML-attributter, men nu kræver standarden at tilpasse teksten ved hjælp af stilark. I modsætning til blokke, som du vil ændre eksterne indsnit i, er CSS centreret i midten ved hjælp af en linje:

tekst-align: center;

Denne ejendom er arvet og bestået fra forælderalle efterkommere. Påvirker ikke kun teksten, men også andre elementer. For at gøre dette skal de være små bogstaver (f.eks. Span) eller linjeblok (eventuelle blokke, som displayet: blokegenskab er indstillet til). Sidstnævnte mulighed giver dig også mulighed for at ændre elementets bredde og højde, det er mere fleksibelt at justere indrykkene.

Ofte på sidernes justering tilskrives selve tagget. Dette gør straks koden ugyldig, da W3C har genkendt justeringsattributten som forældet. Brug af den på siden anbefales ikke.

Juster blokken til midten

Hvis du skal indstille centerjusteringen af div, CSSkan tilbyde en forholdsvis bekvem måde: brugen af ydre margenmargen. Indsnit kan tildeles både blokelementer og rækkefølge-blokke. Værdien af ejendommen skal være 0 (vertikal) og automatisk (vandret indrykning):

margen: 0 auto;

Nu er denne mulighed anerkendt heltgyldigt. Brug af ekstern indrykning giver dig også mulighed for at indstille justeringen af billedet i midten: CSS-ejendomsmargen gør det muligt at løse mange problemer i forbindelse med positionering af et element på siden.

Juster blokken til venstre eller højre kant

Sommetider centrering på en CSS måde er det ikkeDet er nødvendigt, men det er nødvendigt at sætte to blokke i nærheden: en fra venstre kant, en anden - fra højre. Til dette er der en flydeegenskab, der kan tage en af tre værdier: venstre, højre eller ingen. Lad os sige, at du har to blokke, der skal placeres side om side. Så vil koden være:

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

Hvis der også er en tredje blok, som skal placeres under de to første blokke (for eksempel fodfod), skal den indstille den klare egenskab:

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

Sagen er det, der blokerer med klasser til venstre og højrefalder ud af den generelle strøm, det vil sige alle andre elementer ignorerer selve eksistensen af de justerede elementer. Den klare: begge egenskaber tillader en fodfod eller en anden blok for at se elementerne faldt fra strømmen og forhindrer at flyde fra både venstre og højre. Derfor, i vores eksempel, vil footer bevæge sig nedad.

Lodret justering

Der er tidspunkter, hvor det ikke er nok at spørgejustering i midten ved hjælp af CSS metoder, er det også nødvendigt at ændre barnets blokke lodret. Ethvert linie eller linjeblokelement kan trykkes til øverste eller nederste kant, for at være midt i moderelementet eller at være på et vilkårlig sted. Ofte er du nødt til at justere blokken til midten ved hjælp af attributten lodret-align. Antag at der er to blokke, den ene er indlejret i den anden. Den indre blok er et linjeblokelement (display: inline-block). Du skal justere barneblokken lodret:

justering på den øvre grænse - .child {vertical-align: top};
center alignment - .child {vertical-align: middle};
justering på den nederste grænse - .child {vertical-align: bottom};

Blokelementer hverken tekstjustering eller vertikaljustering.

Mulige problemer med justerede blokke

Nogle gange tilpasser diven omkring midten af CSS-metodenkan medføre små problemer. For eksempel, når du bruger float: for eksempel er der tre blokke: .first, .second og .third. Den anden og tredje blok ligger i den første. Et element med anden klasse er venstrejusteret, og den sidste blok er retjusteret. Efter udligning faldt begge ud af strømmen. Hvis forældren ikke har en højde (for eksempel 30em), strækker den ikke længere langs barnets blokke. For at undgå denne fejl skal du bruge "spacer" - en særlig blok, der ses. Sekund og tredje. CSS-kode:

.second {float: left}
.third {float: right}
.clearfix {højde: 0; clear: begge;}

Pseudoklassen bruges ofte:efter, som også giver mulighed for at returnere blokke til stedet ved at oprette en pseudo-fordeling (i eksemplet i div med klassens container ligger indenfor .first og indeholder .left og .right):

.left {float: left}
.right {float: right}
.container: efter {indhold: ""; display: bord; clear: begge;}

Ovenstående muligheder er de mest almindelige, selv om der er flere variationer. Du kan altid finde den mest enkle og bekvemme måde at oprette pseudo-spredning ved at eksperimentere.

Et andet problem, der ofte er, - justering af linjeblokelementer. Efter hver af dem tilføjes et mellemrum automatisk. Marginalegenskaben, som er angivet med en negativ indrykning, hjælper med at klare dette. Der er andre måder, der bruges meget sjældnere: for eksempel nulstilling af skriftstørrelsen. I dette tilfælde er skrifttypestørrelsen: 0 indstillet i egenskaberne af overordnet element. Hvis der er tekst inde i blokkene, returneres den ønskede skrifttypestørrelse i egenskaberne af linjeblokelementer. For eksempel skrifttypestørrelse: 1em. Metoden er ikke altid praktisk, så versionen med eksterne indrykninger bruges meget oftere.

Aligning-blokke giver dig mulighed for at oprette smukke og funktionelle sider: Dette er layoutet af det overordnede layout og varernes placering i online-butikker og fotos på visitkortets websted.