Vad du ska veta
- Använd följande kod för att centrera texten ("[/]" betecknar en radbrytning): .center {[/] text-align: center; [/] }.
- Centrera innehållsblock med följande kod ("[/]" betecknar en radbrytning): .center {[/] marginal: auto; [/] bredd: 80em; [/] }.
- För att centrera en bild ("[/]" betecknar en radbrytning): img.center {[/] display: block; [/] marginal-vänster: auto; [/] marginal-höger: auto; [/] }.
CSS är det bästa sättet att centrera element, men det kan vara en utmaning för nybörjade webbdesigners eftersom det finns så många sätt att uppnå det. Den här artikeln förklarar hur man använder CSS för att centrera text, textblock och bilder.
Centrera text med CSS
Du behöver bara känna till en stilegenskap för att centrera texten på en sida:
.Centrum {
textjustera: centrum;
}
Med den här raden av CSS kommer varje stycke som skrivs med .center-klassen att centreras horisontellt inuti dess överordnade element. Till exempel skulle ett stycke inuti en uppdelning (ett barn i den uppdelningen) centreras horisontellt inuti.
Här är ett exempel på den här klassen som tillämpas i HTML-dokumentet:
Denna text är centrerad.
När du centrerar text med textjusteringsegenskapen, kom ihåg att den kommer att vara centrerad i dess innehållande element och inte nödvändigtvis centrerad inom själva hela sidan.
Läsbarhet är alltid nyckeln när det gäller webbplatstext. Stor block med mittjusterad text kan vara svårt att läsa, så använd den här stilen sparsamt. Rubriker och små textblock, t.ex. teasertext för en artikel, är vanligtvis lätta att läsa när de är centrerade; Större textblock, till exempel en fullständig artikel, skulle emellertid vara utmanande att konsumera om de är helt centrala.
Centrera innehållsblock med CSS
Innehållsblock skapas med hjälp av HTML.
.Centrum {
marginal: auto;
bredd: 80em;
}
Denna CSS-förkortning för marginalegenskapen skulle sätta topp- och bottenmarginalerna till värdet 0, medan vänster och höger skulle använda "auto". Detta tar i princip allt tillgängligt utrymme och delar det jämnt mellan de två sidorna av visningsfönstret och centrerar elementet effektivt på sidan.
Här tillämpas den i HTML:
Hela blocket är centrerat,men texten inuti den vänsterjusteras.
Så länge ditt block har en definierad bredd kommer det att centrera sig inne i det innehållande elementet. Texten i det blocket kommer inte att vara centrerad i den utan kommer att vara vänsterjusterad. Detta beror på att texten är vänsterjusterad som standard i webbläsare. Om du vill att texten ska vara centrerad också kan du använda den textjusteringsegenskap som täcktes tidigare i kombination med den här metoden för att centrera uppdelningen.
Centrera bilder med CSS
Även om de flesta webbläsare visar bilder centrerade med samma textjusteringsegenskap rekommenderas det inte av W3C. Därför finns det alltid en chans att framtida versioner av webbläsare kan välja att ignorera denna metod.
Istället för att använda textjustering för att centrera en bild, bör du uttryckligen berätta för webbläsaren att bilden är ett blocknivåelement. På det här sättet kan du centrera det som med något annat block. Här är CSS för att detta ska hända:
img.center {
display: blockera;
marginal till vänster: auto;
marginal-höger: auto;
}
Och här är HTML-koden för att bilden ska centreras:
Du kan också centrera objekt med inbyggd CSS (se nedan), men detta tillvägagångssätt rekommenderas inte eftersom det lägger till visuella stilar till din HTML-markering. Kom ihåg att stil och struktur ska vara separata; att lägga till CSS-stilar till HTML kommer att bryta den separationen och som sådan bör du undvika det när det är möjligt.
Centrera element vertikalt med CSS
Centrera objekt vertikalt har alltid varit utmanande inom webbdesign, men lanseringen av CSS flexibel boxlayout-modul i CSS3 ger ett sätt att göra det.
Vertikal inriktning fungerar på samma sätt som ovan. CSS-egenskapen är lodrät, så:
.vcenter {
lodrätt: mitt;
}
Alla moderna webbläsare stödja denna CSS-stil. Om du har problem med äldre webbläsare rekommenderar W3C att du centrerar texten vertikalt i en behållare. För att göra det, placera elementen inuti ett innehållande element, till exempel a divoch ställ in en minsta höjd på den. Förklara det innehållande elementet som en tabellcell och ställ in den vertikala justeringen till "mitten".
Här är till exempel CSS:
.vcenter {
min höjd: 12 em;
display: tabellcell;
lodrätt: mitt;
}
Och här är HTML:
Denna text är vertikalt centrerad i rutan.
Använd inte HTML-elementet för att centrera bilder och text; det har upphört att gälla och moderna webbläsare stöder det inte längre. Detta är till stor del ett svar på HTML5: s tydliga åtskillnad mellan struktur och stil: HTML skapar struktur och CSS dikterar stil. Eftersom centrering är en visuell egenskap hos ett element (hur det ser ut snarare än vad det är) hanteras den stilen med CSS, inte HTML. Använd CSS istället så att dina sidor visas korrekt och uppfyller moderna standarder.
Vertikal centrering och äldre versioner av Internet Explorer
Du kan tvinga Internet Explorer (IE) att centrera och sedan använda villkorliga kommentarer så att endast IE ser stilarna, men de är lite detaljerade och tilltalande. Microsofts 2015-beslut att släppa stöd för äldre versioner av IEkommer emellertid att göra detta till ett icke-problem när IE går ur bruk.