Centrering: Skillnad mellan sidversioner
Från Webbling
PGJ (diskussion | bidrag) Ingen redigeringssammanfattning |
PGJ (diskussion | bidrag) Ingen redigeringssammanfattning |
||
| Rad 1: | Rad 1: | ||
Att centrera saker | 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... | |||
== Horisontellt...== | == Horisontellt...== | ||
| Rad 15: | Rad 17: | ||
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. 17.40
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...
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]