Centrering: Skillnad mellan sidversioner

Versionen från 25 januari 2019 kl. 07.44

Att centrera saker har inte alltid varit helt enkelt i HTML. Nu mer kan man ofta förlita sig på saker som flexbox, som gör livet mycket enklare.

Det finns en hel del olika sätt på vilka man kan åstadkomma centrering. Först måste vi definiera hur du vill centrera...

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

margin: 0 auto;

Om ditt block-element inte har en bredd, kanske det inte centreras pga av att det är stort nog att fylla hela den tillgängliga ytan.

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

text-align: center;

Det lättaste är att använda sig av flexbox, t.ex. så här:

display: flex;
flex-direction: column;
justify-content: center;

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; http://css-tricks.com/centering-css-complete-guide/

@@ Rad 9: / Rad 9: @@
 margin: 0 auto;
 </syntaxhighlight>
+Om ditt block-element inte har en bredd, kanske det inte centreras pga av att det är stort nog att fylla hela den tillgängliga ytan.
 ===Är det du vill centrera ett inline-element?===
 Gäller för t.ex. text och liknande. Sätt <code>text-align</code> till <code>center</code>. Så här: