Hvordan Venstre, Høyre, Senter linje med CSS
I stedet for å bruke HTML innretting attributter med HTML-kodene som markup tekst, er den beste praksis for webdesignere å flytte presentasjonen (justeringsalternativene) informasjon til stilarket. Denne artikkelen vil forklare hvordan du kan justere tekst og hvordan å sentrere større sideelementer som divs.
Bruksanvisning
Hvordan justere tekst
1 For å justere teksten innenfor en normal tekstblokk som et avsnitt eller en blockquote, bruker text-align eiendom.
De verdivalg for test-align eiendommen er til venstre, høyre, senter og rettferdiggjøre. Siden justert tekst er ikke veldig lesbart på nettet, viser illustrasjon venstre, høyre og sentrum. I denne illustrasjonen, har hvert avsnitt et svart kant for å demonstrere størrelsen av blokken element på den side hvis ingen fast bredde påtrykkes elementet.
3 Normalt et element er tilordnet en id eller klasse. Teksten justering av noen elementer i det id eller klasse er satt med en regel for eksempel en av disse: venstre {
text-align: left;
}
høyre {
text-align: right;
}
center {
text-align: center;
}
Hvordan Sentrer Divs, wrapper Divs og Body
4 Det kan være lurt å sentrere en hel layout eller en stor avdeling av en layout. I slike tilfeller bruker du en annen CSS teknikk.
5 Du bruker CSS-regel til større element velgeren du ønsker sentrert. Det kan være legemet element, et omslag div eller en beholder div.
6 Sentrering av denne metoden påvirker ikke tekstjustering. Den sentrert element vil beholde standardvenstrejustering av tekst i midtelementet.
7
Følgende er en illustrasjon av en hel kropp element (med en svart ramme ment som en klargjøring) i midten av en side. En bredde må stilles for elementet, deretter til venstre og høyre marg er satt til auto. Slik gjør du:
kropp {
width: 80%;
margin-right: auto;
margin-left: auto;
border: 1px solid black;
}
Hint
- Det er normalt ikke nødvendig å bruke justere venstre siden venstre justering er standard. Men du må være klar over at det eksisterer i tilfelle du må nullstille tidligere midtstilt eller høyrejustert tekst til standard i senere bruk.
- Bredden på elementet som skal sentreres kan settes i piksler, prosenter eller EMS.