Sådan justeres elementer lodret og vandret i en div

I denne tutorial vil jeg vise jer, hvordan man justerer elementer lodret og vandret inde i en div! Jeg vil bruge to forskellige metoder til at opnå dette.

  1. CSS Flexbox

I CSS Flexbox er alt hvad du skal gøre for at centrere et element inden i en div at indstille align-items og justify-content attributter til center! Heldigvis behøver du ikke engang redigere styling af underordnede elementer i denne metode.

.parent-div {display: flex; align-items: center; justify-content: center; }

2. Absolutte stylings

Du er også i stand til at centrere et element inden i en div ved at give overordnede div en relativ position og styling af barnet div med en position af absolut og en transform egenskab! Transformeegenskapen skal have en oversætningsfunktion, hvor x- og y-parametrene er -50%.

.parent-div {position: relativ; }
.child-div {position: absolut; transform: oversætte (-50%, -50%); }

Efter at have lært de forskellige måder at centrere et element inde i en div, hvilken du vil vælge. Jeg foretrækker personligt at bruge flexen, fordi det giver mig mulighed for at bruge egenskaben flex-direction til at bruge den på flere elementer.