Centrering: Skillnad mellan sidversioner

Versionen från 19 oktober 2014 kl. 17.41

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;

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;

!!Läs mer om centrering Om du vill lära dig mer om centrering kan du läsa den här artikeln [1]

@@ Rad 6: / Rad 6: @@
 ===Är det du vill centrera ett block-element?===
 Sätt både vänster- och högermarginal till <code>auto</code>. T.ex. så här:
-<code>margin: 0 auto;</code>
+<syntaxhighlight lang="html5">
+margin: 0 auto;
+</syntaxhighlight>
 ===Ä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:
-<code>text-align: center</code>
+<syntaxhighlight lang="html5">
+text-align: center;
+</syntaxhighlight>
 ==Vertikalt==
 Det lättaste är att använda sig av flexbox, t.ex. så här:
-<code>
+<syntaxhighlight lang="html5">
 display: flex;
 flex-direction: column;
 justify-content: center;
-</code>
+</syntaxhighlight>
-==Både horisontellt och veritkalt==
+==Både horisontellt och vertikalt==
 Använd flexbox, t.ex. så här:
-<code>
+<syntaxhighlight lang="html5">
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
-</code>
+</syntaxhighlight>
+!!Läs mer om centrering
 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/]