InternetWeb design

Centreret: CSS-layout

Når layoutet på siden er ofte nødvendigt at foretage en centreret CSS-måde: for eksempel at centrere hovedenheden. Der er flere løsninger på dette problem, som hver især før eller senere bliver nødt til at bruge enhver coder.

Juster tekst til center

Ofte til dekorative formål, du ønsker at indstille teksten centreret, CSS i dette tilfælde, at reducere den tid af tvang. Tidligere dette blev gjort ved hjælp af HTML-attributter, men nu standarden kræves for at tilpasse teksten med den stil ark. I modsætning til blokken, som du ønsker at ændre den eksterne polstring i CSS justeringen af tekst i er lavet med en enkelt linje midten:

  • text-align: center;

Denne egenskab er nedarvet og videregivet fra forældre til alle børn. Det påvirker ikke kun teksten, men også til andre elementer. Til dette formål bør de små bogstaver (fx spændvidde) eller række-blok (eventuelle blokke, der angiver display ejendom: blok). Den sidstnævnte mulighed giver dig også mulighed for at ændre bredden og højden af elementet, mere fleksibel konfiguration af indrykning.

sider ofte tilpasse attribut for sig selv mærket. Dette umiddelbart gør koden ugyldig, da W3C anerkendte align attribut forældet. Ved hjælp af den på en side kan ikke anbefales.

Centreret blok

Hvis du ønsker at indstille justeringen af div i midten, kan CSS tilbyde en ganske behagelig måde: brugen af eksterne polstring margen. Polstring kan specificeres som blokelementerne og line-blok. Svoysva værdi skal være 0 (lodret polstring), og auto (automatisk indrykning vandret):

  • margin: 0 auto;

Nu er denne valgmulighed er anerkendt som absolut gyldig. 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.

Justering af venstre eller højre kant af blokken

Sommetider CSS-måde kræver ikke tilpasning af centret, men det er nødvendigt at sætte de næste to blokke, den ene fra venstre side og den anden - fra højre. Til dette er der flyderen ejendom, som kan tage en af tre værdier: venstre, højre eller ingen. Lad os sige, du har to blokke, som skal placeres ved siden af hinanden. Så koden er som følger:

  • .left {float: venstre;}
  • .right {float: højre}

Hvis der er en tredje blok, som skal være placeret under de første to blokke (fx footer), så er det nødvendigt at registrere klar funktion:

  • .left {float: venstre;}
  • .right {float: højre}
  • footer {klart: både}

Det faktum, at blokkene med klasserne af venstre og højre falde ud af den totale strøm, det vil sige, alle andre elementer ignoreret selve eksistensen af elementer justeret. Ejendom klar: både tillader footer blok eller anden synlig præcipiteret fra flowcellerne og forbyder wrap (float) på både venstre og højre. Derfor, i vores eksempel, er sidefoden forskudt nedad.

lodret justering

Der er tilfælde, hvor ikke nok til at indstille justering af midten af CSS-måder, skal du også ændre den lodrette placering af barnet blok. kan presses enhver linie eller række-blok element mod den øvre eller nedre kant, placeret i midten af det oprindelige element eller være i en vilkårlig placering. Oftest kræver tilpasning af midten af blokken, det bruger vertical-align attribut. Antag at der er to blokke, den ene indlejret i den anden. I denne indendørs enhed - række-block element (display: inline-blok). Det er nødvendigt at tilpasse den lodrette blok barn:

  • justering af den øvre grænse - .child {vertical-align: top};
  • centreret - .child {vertical-align: middle};
  • tilpasning af underkanten - .child {vertical-align: bottom};

Ved blok elementer lyd text-align, eller vertikal-align ikke gælder.

Mulige problemer med justeret enheder

Sommetider div align midt på CSS-vejs kan forårsage lidt problemer. For eksempel når der anvendes en prop: for eksempel er der tre blokke: .first, .second og .third. Den anden og tredje blokke ligge i den første. Et element med en klasse sekund venstrestillet, og den sidste blok - til højre. Efter justering af to faldt fra strømmen. Hvis den forælder element ikke er defineret højde (fx 30em), det vil ophøre med at strække højden af underordnede enheder. For at undgå denne fejl, skal du bruge "spacer" - en særlig enhed, der opfatter .second og .third. CSS-kode:

  • .second {flyde: venstre}
  • .third {float: højre}
  • .clearfix {højde: 0; klart: begge;}

pseudo ofte anvendt: efter, som også tillader at returnere blokkene på plads ved at skabe psevdorasporki (i eksemplet i div med klasse ligger inde i beholderen og omfatter en .first .left og .right):

  • .left {float: venstre}
  • .right {float: højre}
  • .container: efter {indhold: ''; display: table; klart: begge;}

De ovenstående 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.

Et andet problem, ofte stødt layout - tilpasning af line-block elementer. Efter hver af dem tilføjes et mellemrum automatisk. Håndtag det hjælper den margen ejendom, som er defineret af den negative indrykning. Der er andre måder, som anvendes mindre hyppigt, f.eks nulstille skriftstørrelsen. I dette tilfælde egenskaberne af overordnet element registrerer font-size: 0. Hvis placeret inden for blokke af tekst, har egenskaberne af line-blokelementer returneret til den ønskede skriftstørrelse. For eksempel font-size: 1em. Metoden er ikke altid praktisk, så det er meget mere almindeligt anvendt version med eksterne marginer.

Justering Blocks giver dig mulighed for at skabe smukke og funktionelle sider: det generelle layout og layout, og placeringen af varer i butikkerne, og fotos på stedet af en lille.

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 da.unansea.com. Theme powered by WordPress.