Hvad man skal vide
- For at centrere tekst skal du bruge følgende kode ("[/]" angiver et linjeskift): .center {[/] text-align: center; [/] }.
- Centrer blokke af indhold med følgende kode ("[/]" angiver et linjeskift): .center {[/] margin: auto; [/] bredde: 80em; [/] }.
- For at centrere et billede ("[/]" angiver et linjeskift): img.center {[/] display: blok; [/] margen-venstre: auto; [/] margen-højre: auto; [/] }.
CSS er den bedste måde at centrere elementer på, men det kan være en udfordring for begyndende webdesignere, fordi der er så mange måder at opnå det på. Denne artikel forklarer, hvordan man bruger CSS til at centrere tekst, tekstblokke og billeder.
Centrering af tekst med CSS
Du behøver kun at kende en stilegenskab for at centrere tekst på en side:
.center {
tekstjustering: center;
}
Med denne linje af CSS vil hvert afsnit, der er skrevet med .center-klassen, være centreret vandret inde i dets overordnede element. For eksempel vil et afsnit inde i en division (et barn i denne division) være centreret vandret inde i.
Her er et eksempel på denne klasse anvendt i HTML-dokumentet:
Denne tekst er centreret.
Når du centrerer tekst med egenskaben tekstjustering, skal du huske, at den vil være centreret inden i dens indeholdende element og ikke nødvendigvis centreret inden for selve hele siden.
Læsbarhed er altid nøglen, når det kommer til webstedets tekst. Stor blokke af centerjusteret tekst kan være svært at læse, så brug denne stil sparsomt. Overskrifter og små tekstblokke, såsom teasertekst til en artikel, er typisk nemme at læse, når de er centreret; større tekstblokke, som f.eks. en komplet artikel, ville dog være udfordrende at forbruge, hvis de var fuldstændigt centreret.
Centrering af blokke af indhold med CSS
Blokke af indhold oprettes ved hjælp af HTML.
.center {
margen: auto;
bredde: 80em;
}
Denne CSS-stenografi for marginegenskaben indstiller top- og bundmargenerne til en værdi på 0, mens venstre og højre bruger "auto". Det her tager stort set al ledig plads og deler den jævnt mellem de to sider af visningsvinduet og centrerer effektivt elementet på siden.
Her anvendes det i HTML:
Hele denne blok er centreret,men teksten inde i den er venstrejusteret.
Så længe din blok har en defineret bredde, vil den centrere sig inde i det indeholdende element. Tekst indeholdt i blokken vil ikke være centreret i den, men vil være venstrejusteret. Dette skyldes, at tekst er venstrejusteret som standard i webbrowsere. Hvis du også vil have teksten centreret, kan du bruge den tidligere justerede tekstjusteringsegenskab i forbindelse med denne metode til at centrere divisionen.
Centrering af billeder med CSS
Selvom de fleste browsere viser billeder centreret ved hjælp af den samme tekstjusteringsegenskab, anbefales det ikke af W3C. Derfor er der altid en chance for, at fremtidige versioner af browsere kan vælge at ignorere denne metode.
I stedet for at bruge tekstjustering til at centrere et billede, skal du udtrykkeligt fortælle browseren, at billedet er et element på blokniveau. På denne måde kan du centrere det som ved enhver anden blokering. Her er CSS for at få dette til at ske:
img.center {
display: blok;
margen til venstre: auto;
margen-højre: auto;
}
Og her er HTML'en til billedet, der skal centreres:
Du kan også centrere objekter ved hjælp af indbygget CSS (se nedenfor), men denne fremgangsmåde anbefales ikke, fordi den tilføjer visuelle stilarter til din HTML-markering. Husk, stil og struktur skal være adskilt; tilføjelse af CSS-stilarter til HTML vil bryde denne adskillelse, og som sådan bør du undgå det, når det er muligt.
Centrering af elementer lodret med CSS
Centrering af objekter lodret har altid været udfordrende inden for webdesign, men frigivelsen af CSS fleksibelt kasselayoutmodul i CSS3 giver en måde at gøre det på.
Lodret justering fungerer på samme måde som vandret justering, der er dækket ovenfor. CSS-ejendommen er lodret justeret som sådan:
.vcenter {
lodret-justere: midten;
}
Alle moderne browsere understøtter denne CSS-stil. Hvis du har problemer med ældre browsere, anbefaler W3C, at du centrerer tekst lodret i en container. For at gøre det skal du placere elementerne inde i et indeholdende element, såsom en div, og indstil en minimumshøjde på den. Erklær det indeholdende element som en tabelcelle, og indstil den lodrette justering til "midten".
For eksempel er her CSS:
.vcenter {
min-højde: 12 em;
display: tabelcelle;
lodret-justere: midten;
}
Og her er HTML:
Denne tekst er lodret centreret i feltet.
Brug ikke HTML-elementet til at centrere billeder og tekst; det er udfaset, og moderne webbrowsere understøtter det ikke længere. Dette er i vid udstrækning et svar på HTML5s klare adskillelse af struktur og stil: HTML skaber struktur, og CSS dikterer stil. Fordi centrering er en visuel egenskab ved et element (hvordan det ser ud snarere end hvad det er), håndteres denne stil med CSS, ikke HTML. Brug i stedet CSS, så dine sider vises korrekt og overholder moderne standarder.
Lodret centrering og ældre versioner af Internet Explorer
Du kan tvinge Internet Explorer (IE) til at centrere og derefter bruge betingede kommentarer, så kun IE ser typografierne, men de er lidt detaljerede og ikke tiltalende. Microsofts beslutning fra 2015 om at droppe support til ældre versioner af IEvil dog gøre dette til et ikke-problem, når IE går ud af brug.