Når side layout er ofte nødvendigt at lavecenterjustering i CSS-metoden: for eksempel centrer hovedblokken. Der er flere løsninger på dette problem, som hver eller en gang før eller senere skal bruges af en hvilken som helst typesetter.
Center tekstjustering
Ofte til dekorative formål er det nødvendigt at indstilletekstjustering i midten giver CSS i dette tilfælde 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 de blokke, som du ønsker at ændre indrykket i, er justeringen af teksten i midten gjort med en enkelt linje:
- tekst-align: center;
Denne ejendom er arvet og bestået fra forældre.til alle efterkommere. Det påvirker ikke kun tekst, men også andre elementer. For at gøre dette skal de være inline (for eksempel span) eller inline-block (alle blokke, der har displayet: blokegenskab). Sidstnævnte mulighed giver dig også mulighed for at ændre elementets bredde og højde, justere indrykningerne mere fleksibelt.
Ofte tilskrives tilpasning selve mærket. Dette gør straks koden ugyldig, da W3C anerkendte justeringsattributten som forældet. Brug af den på siden anbefales ikke.
Centerjustering
Hvis du vil indstille centerjusteringen af div, CSSkan tilbyde en ret bekvem måde: ved hjælp af eksterne marginindrykker. Indrykker kan indstilles som blokelementer og linjeblok. Egenskabsværdien skal tage værdierne 0 (lodrette indrykk) og auto (automatiske vandrette indrykk):
- margin: 0 auto;
Nu er denne mulighed anerkendt heltgyldigt. Brug af ekstern polstring giver dig også mulighed for at indstille justeringen af centrum: CSS-margin ejendom giver os mulighed for at løse mange problemer forbundet med placeringen element på siden.
Juster blokken til venstre eller højre
Sommetider centreret på en CSS måde ikkekræves, men det er nødvendigt at sætte to blokke side om side: en fra venstre kant, den anden fra højre. For dette er der en ejendomsflåde, som kan tage en af tre værdier: venstre, højre eller ingen. Antag at du har to blokke, der skal samles. Så bliver koden sådan:
- .left {float: left;}
- .right {float: right}
Hvis der også er en tredje blok, som skal placeres under de første to blokke (for eksempel en sidefod), så skal den indstille den klare egenskab:
- .left {float: left;}
- .right {float: right}
- footer {clear: both}
Faktum er, at blokerer med klasser til venstre og højrefalder ud af den generelle strøm, dvs. alle andre elementer ignorerer eksistensen af udjævne elementer. Den klare: begge egenskaber tillader bundsfoden eller en hvilken som helst anden blok for at se elementer faldt ud af strømmen og forbyder indpakning (float) både til venstre og til højre. Derfor, i vores eksempel, vil footeren skifte ned.
Lodret justering
Бывают случаи, когда недостаточно задать centerjustering med CSS-metoder, skal du stadig ændre den lodrette position af barneblokken. Ethvert linie eller linjeblokelement kan trykkes til øverste eller nederste kant, være midt i moderelementet eller være på et vilkårlig sted. Oftest kræves blokjustering i midten, for dette benyttes den lodrette justeringsattribut. Antag at der er to blokke, en indlejret i den anden. Samtidig er den interne blok et linjeblokelement (display: inline-block). Det er nødvendigt at justere barneblokken lodret:
- topline alignment - .child {vertical-align: top};
- center alignment - .child {vertical-align: middle};
- bottom alignment - .child {vertical-align: bottom};
Hverken tekstjusteret eller vertikaljustering virker på blokelementer.
Mulige problemer med justerede blokke
Nogle gange tilpasser en div til centret på CSS mådekan medføre mindre problemer. For eksempel, når du bruger float: Lad os sige, at der er tre blokke: .first, .sekund og tredje. Den anden og den tredje blok ligger i den første. Elementet med anden klasse er venstrejusteret, og den sidste blok er ret justeret. Efter justering faldt begge ud af strømmen. Hvis moderelementet ikke har en højde (for eksempel 30em), så vil den stoppe med at strække sig langs barnets blokke. For at undgå denne fejl skal du bruge "strut" - en særlig blok, der ser .sekund og tredje. CSS kode:
- .sekund {float: left}
- .third {float: right}
- .clearfix {højde: 0; clear: begge;}
Ofte brugt pseudoklasse:efter, som også giver dig mulighed for at returnere blokke på plads ved at oprette et pseudo-razorka (i eksemplet i en div med klassebeholderen 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 nemmeste og mest hensigtsmæssige måde at oprette en pseudo-ramification gennem eksperimenter.
Et andet problem opstår oftetypesetters - justering af inline-blokelementer. Efter hver af dem tilføjes et mellemrum automatisk. Marginalegenskaben hjælper med at klare dette. Der er andre metoder, der bruges meget sjældnere: for eksempel nulstilling af skriftstørrelsen. I dette tilfælde skrives skriftstørrelse: 0 i egenskaberne af overordnet element. Hvis der er tekst inde i blokkene, er den ønskede skrifttypestørrelse allerede returneret i egenskaberne af inline-blokelementer. F.eks. Skrifttypestørrelse: 1em. Metoden er ikke altid bekvem, så indstillingen med eksterne led er hyppigere brugt.
Tilpasningen af blokkene giver dig mulighed for at oprette smukke og funktionelle sider: Dette er layoutet af det overordnede layout og varernes placering i online butikker og billeder på hjemmesiden.
