Hva du skal vite
- For å sentrere tekst, bruk følgende kode ("[/]" angir et linjeskift): .center {[/] text-align: center; [/] }.
- Senter blokker av innhold med følgende kode ("[/]" betegner et linjeskift): .center {[/] margin: auto; [/] bredde: 80em; [/] }.
- Slik sentrerer du et bilde ("[/]" betegner et linjeskift): img.center {[/] display: blokk; [/] margin-venstre: auto; [/] margin-right: auto; [/] }.
CSS er den beste måten å sentrere elementer på, men det kan være en utfordring for begynnende webdesignere fordi det er så mange måter å oppnå det på. Denne artikkelen forklarer hvordan du bruker CSS til å sentrere tekst, tekstblokker og bilder.
Sentrering av tekst med CSS
Du trenger bare å kjenne en stilegenskap for å sentrere tekst på en side:
.senter {
tekstjustering: sentrum;
}
Med denne linjen med CSS vil hvert avsnitt skrevet med .center-klassen være sentrert horisontalt i det overordnede elementet. For eksempel vil et avsnitt i en divisjon (et barn av den divisjonen) være sentrert horisontalt inne i.
Her er et eksempel på denne klassen som brukes i HTML-dokumentet:
Denne teksten er sentrert.
Når du sentrerer tekst med den tekstjusterende egenskapen, må du huske at den vil være sentrert i det inneholder elementet og ikke nødvendigvis sentrert i selve hele siden.
Lesbarhet er alltid viktig når det gjelder tekst på nettstedet. Stor blokker med senterjustifisert tekst kan være vanskelig å lese, så bruk denne stilen sparsomt. Overskrifter og små tekstblokker, for eksempel teasertekst for en artikkel, er vanligvis enkle å lese når de er sentrert. Imidlertid vil større tekstblokker, for eksempel en full artikkel, være utfordrende å konsumere hvis de er helt senterbegrunnede.
Sentrere blokker av innhold med CSS
Innholdsblokker opprettes ved hjelp av HTML.
.senter {
margin: auto;
bredde: 80em;
}
Denne CSS-stenografien for margin-egenskapen vil sette topp- og bunnmarginene til verdien 0, mens venstre og høyre bruker "auto". Dette tar i hovedsak all tilgjengelig plass og deler den jevnt mellom de to sidene av visningsvinduet, og sentrerer elementet effektivt på siden.
Her brukes den i HTML:
Hele denne blokken er sentrert,men teksten i den er venstrejustert.
Så lenge blokken har en definert bredde, vil den sentrere seg inne i det inneholder elementet. Teksten i denne blokken vil ikke være sentrert i den, men vil være venstrejustert. Dette er fordi tekst er venstrejustert som standard i nettlesere. Hvis du også vil at teksten skal være sentrert, kan du bruke tekstjusteringsegenskapen som ble dekket tidligere i forbindelse med denne metoden for å sentrere divisjonen.
Sentrere bilder med CSS
Selv om de fleste nettlesere viser bilder sentrert ved hjelp av samme tekstjusteringsegenskap, anbefales det ikke av W3C. Derfor er det alltid en sjanse for at fremtidige versjoner av nettlesere kan velge å ignorere denne metoden.
I stedet for å bruke tekstjustering til å sentrere et bilde, bør du fortelle nettleseren eksplisitt at bildet er et element på blokknivå. På denne måten kan du sentrere det som med noen annen blokk. Her er CSS for å få dette til:
img.center {
skjerm: blokk;
margin-venstre: auto;
margin-høyre: auto;
}
Og her er HTML-en for bildet som skal sentreres:
Du kan også sentrere objekter ved hjelp av innebygd CSS (se nedenfor), men denne tilnærmingen anbefales ikke fordi den legger til visuelle stiler i HTML-markeringen din. Husk at stil og struktur skal være separate; Hvis du legger til CSS-stiler i HTML, brytes skillet, og du bør derfor unngå det når det er mulig.
Sentrere elementer vertikalt med CSS
Sentrering av objekter vertikalt har alltid vært utfordrende innen webdesign, men utgivelsen av CSS fleksibel boksmodul i CSS3 gir en måte å gjøre det på.
Vertikal justering fungerer på samme måte som horisontal justering dekket ovenfor. CSS-egenskapen er loddrett, slik:
.vcenter {
loddrett: midt;
}
Alle moderne nettlesere støtter denne CSS-stilen. Hvis du har problemer med eldre nettlesere, anbefaler W3C at du sentrerer tekst vertikalt i en container. For å gjøre det, plasser elementene i et inneholdende element, for eksempel a div, og sett en minimumshøyde på den. Erklær det inneholdende elementet som en tabellcelle, og sett den vertikale justeringen til "midt".
Her er for eksempel CSS:
.vcenter {
min høyde: 12em;
display: tabellcelle;
loddrett: midt;
}
Og her er HTML:
Denne teksten er sentrert i boksen.
Ikke bruk HTML-elementet til å sentrere bilder og tekst; den er avviklet, og moderne nettlesere støtter den ikke lenger. Dette er i stor grad et svar på HTML5s klare skille mellom struktur og stil: HTML skaper struktur, og CSS dikterer stil. Fordi sentrering er en visuell egenskap ved et element (hvordan det ser ut enn hva det er), håndteres den stilen med CSS, ikke HTML. Bruk CSS i stedet slik at sidene dine vises riktig og samsvarer med moderne standarder.
Vertikal sentrering og eldre versjoner av Internet Explorer
Du kan tvinge Internet Explorer (IE) til å sentrere og deretter bruke betingede kommentarer slik at bare IE ser stilene, men de er litt detaljerte og lite tiltalende. Microsofts beslutning fra 2015 om å slippe støtte for eldre versjoner av IEvil imidlertid gjøre dette til et ikke-problem når IE går ut av bruk.