Centrering: Skillnad mellan sidversioner
Från Webbling
PGJ (diskussion | bidrag) Skapade sidan med '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 centre...' |
PGJ (diskussion | bidrag) Ingen redigeringssammanfattning |
||
| Rad 1: | Rad 1: | ||
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... | 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 <code>auto</code>. T.ex. så här: | Sätt både vänster- och högermarginal till <code>auto</code>. T.ex. så här: | ||
<code>margin: 0 auto;</code> | <code>margin: 0 auto;</code> | ||
===Ä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: | 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> | <code>text-align: center</code> | ||
==Vertikalt== | |||
Det lättaste är att använda sig av flexbox, t.ex. så här: | Det lättaste är att använda sig av flexbox, t.ex. så här: | ||
<code> | <code> | ||
| Rad 14: | Rad 15: | ||
justify-content: center; | justify-content: center; | ||
</code> | </code> | ||
===Både horisontellt och veritkalt=== | |||
Använd flexbox, t.ex. så här: | Använd flexbox, t.ex. så här: | ||
<code> | <code> | ||
Versionen från 19 oktober 2014 kl. 15.38
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]