CSSi vertikaalne probleem

CSSi vertikaalne probleem

Kui Teil on veebidisainerist sõber või olete Te ise veebidisainer, siis kindlasti olete Te kokku puutunud selle kurikuulsa “CSSi vertikaalse probleemiga”, kus sooviksite, et mõned lapselemendid asuksid mingi emaelemendi suhtes vertikaalselt keskel. Tundub ju lihtne, aga tegelikkuses on asi palju keerulisem.

Täna ma näitan Teile kahte võimalust kuidas paigudata elemente vertikaalselt keskele CSSis.

1. Kui emaelemendi kõrgus on teada (ei ole protsent)

See siin on üsnagi lihtne lahendus.

Tuleks luua kaks divi, üks emaelement (kindla kõrgusega) ja üks lapselement.

<div class="parent">
  <div class="child">
    Tekst siia
  </div>
</div>

Siis peaks olema umbes selline CSS.

.parent{
  height: /*kindel väärtus (mitte protsendid)*/;
  width: /*ei pea olema kindel väärtus*/;
}

.child{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

position: relative – Muudame positsiooni ära relatiivseks, et elementi saaks paremini liigutada

top: 50% – Nüüd anname elemendi ülemisele äärele 50% emaelemendi ülemisest äärest

transform: translateY(-50%) – Järgmisena nihutame elementi Y-telje suhtes tema kõrgusest pool tagasi

Interaktiivse näite leiate siit.

2. Kui emaelemendi kõrgus ei ole teada (protsent)

See lahendus on natukene keerulisem, aga selle eest on ta paremini responsive kui esimene. Lisaks selle töötab ta koos protsentidega kui ka ilma.

Kõigepealt tuleks meil luua kolm divi.

<div class="parent">
  <div class="child">
    <div class="inner">
      Tekst siia
    </div>
  </div>
</div>

Ning pärast seda peaks tulema umbes selline CSS.

.parent{
  position: absolute;
  display: table;
  height: /*ei pea olema kindel väärtus*/;
  width: /*ei pea olema kindel väärtus*/;
}

.child{
  display: table-cell;
  vertical-align: middle;
}

.inner{
  width: /*ei pea olema kindel väärtus, aga peaks olema väiksem kui vanaemaelemendi width*/;
  height: /*ei pea olema kindel väärtus,aga peaks olema väiksem kui vanaemaelemendi height*/;
}

position: absolute – Muudame elemendi paremini kujundatavaks selleks näiteks (et protsendid loeksid)

display: table – Seame display tableks, sest siis saame ka anda lapselemendile display väärtuseks table-cell, mis teeb selle häkki võimalikuks

display: table-cell – Nagu varem sai öeldud, et see on selle häkki üks põhiosa

vertical-align: middle – See on selle häki kõige tähtsam osa, sest see ütleb milline asukoht ontable-cellil

Interaktiivse näite leiate siit.

3. Flexbox

See on minu lemmiklahendus, sest see on tänapäeva üks paremaid viise, kuidas elemente paigutada.

Töötab nii protsentidega kui ka kindlate väärtustega.

Alustuseks tuleb luua kaks divi, üks emaelement (võib olla nii protsent kui ka kindel väärtus) ja üks lapselement.

<div class="parent">
  <div class="child">
    Tere maailm!
  </div
</div>

Järgmisena tuleb selline CSS.

.parent{
  width: /*ei pea olema kindel väärtus*/;
  height: /*ei pea olema kindel väärtus*/;
  background-color: black;
  position: absolute;
  display: flex;
}

.child{
  background-color: white;
  margin: auto 0;
  flex: 1;
}

position: absolute – Muudame jälle elemendi paremini kujundatavaks selleks näiteks (et protsendid loeksid)

display: flex – Ütleb lapselementidele, et me tahame kasutada flexboxiga seotud kujundamisviise

margin: auto 0 – Kõige tähtsam osa. Ütleb lapselemendile, et ülevalt ja alt peab võtma võrdse kauguse emaelemendi äärtest.

flex: 1 – Muudab lapselemendi laiuse emaelemendiga võrdseks. See on lihtsalt flexboxi viis öelda width: 100%.

Interaktiivse näite leiate siit.

 

Ja ongi kõik. Ma loodan, et ma aitasin välja osasid disainereid/arendajaid.

Kas Te teate veel CSSi (vertikaalse paigutamise) nippe? Kui jah, siis andke komentaarides teada 🙂 !

 

Senikaua olge tugevad ja kohtume juba järgmistes postitustes,

Tähelepanu eest tänades – Oliver Paljak

P.S! Kui oled huvitatud animatsioonilisest veebilehest, siis võta minuga julgelt ühendust AnsiVeebi kodulehel.

Leave a Reply

Your email address will not be published. Required fields are marked *