Centrering

Från Webbling
Version från den 19 oktober 2014 kl. 17.38 av PGJ (diskussion | bidrag)
Hoppa till: navigering, sök

Att centrera saker är inte alltid helt enkelt i HTML. Det finns en hel del olika sätt på vilka man kan åstadkomma centrering. Först måste vi definiera hur du vill centrera...

Horisontellt...

Är det du vill centrera ett block-element?

Sätt både vänster- och högermarginal till auto. T.ex. så här: margin: 0 auto;

Är det du vill centrera ett inline-element?

Gäller för t.ex. text och liknande. Sätt text-align till center. Så här: text-align: center

Vertikalt

Det lättaste är att använda sig av flexbox, t.ex. så här: display: flex; flex-direction: column; justify-content: center;

Både horisontellt och veritkalt

Använd flexbox, t.ex. så här: display: flex; flex-direction: column; justify-content: center; align-items: center; Om du vill lära dig mer om centrering kan du läsa den här artikeln [1]