HTML-i kesktekst - kuidas CSS-i vertikaalselt joondada

HTML- ja CSS-maailmas on kõik paigutusstruktuurist ja elementide jaotusest. Tavaliselt kasutame märgistuse ja struktuuri määratlemiseks HTML-i, samas kui CSS aitab meil elementide kujundamisel ja joondamisel hakkama saada.

Selles postituses tutvume veidi HTML-elementide tsentreerimise ja CSS-iga vertikaalse joondamise käsitlemise viisidega.

Kõigepealt õpime, kuidas teksti CSS-iga joondada.

Järgmisena käsitleme div ja kõigi muude elementide joondamist.

Ja lõpuks õpime, kuidas teksti ja diva konteinerisse panna.

Kuidas teksti tsentreerida

CSS-i abil saab teksti keskendada mitmel viisil.

Atribuudi Float kasutamine

Ujuk on lihtne viis teksti joondamiseks.

Teksti paigutamiseks paigutuse paremale küljele saame seda lihtsalt kasutada right  väärtusena float.

Vasakule küljele teksti paigutamiseks kasutame leftlike float:left. Vaadake järgmist näidet:

 .right { float: right; } .left { float: left; } // HTML Right Left

Teksti tsentreerimiseks ujuki abil saame seda kasutada margin-leftvõi margin-rightteha   50%, nagu allpool.

 .center { float: left; margin-left: 50%; } /* HTML*/ Center

Siit saate lisateavet selle kasutamise kohta Float.

Kasutades teksti joondamist

text-alignon mugavam ja täpsem viis teksti joondamiseks. See võimaldab meil panna teksti juures centervõi leftvõi rightpool, järgmine näide näitab:

.right { text-align: right; } .left { text-align: left; } .center { text-align: center; } /* HTML */ 

Right

Center

Left

Lisateave text-align.

Kuidas joondada a div

Noh, selleks on palju võimalusi.

Samamoodi nagu Floatteksti joondamiseks, saame seda kasutada ka divelemendi joondamiseks .

Floatteeb seda tööd, kuid CSS pakub meile paremaid võimalusi, mis on mugavamad ja elegantsemad. Kas olete kuulnud Flexbox? Või css-grid?

Need kaks meetodit pakuvad CSS-is väga kaasaegseid viise oma paigutusega joondamiseks ja sellega töötamiseks. Vaatame Flexboxi üksikasjalikumalt.

Flexbox  

Flexbox pakub lihtsat ja arusaadavat viisi joondamiseks div- ja see on siiani minu lemmikmeetod CSS-is paigutuste käsitlemiseks (kasutan seda igapäevaselt).

Vaatame, mida me teeksime, Flexboxet näha, kuidas see toimib, luues uuesti ülaltoodud näite.

Näide:

Kood:

      Flexbox  .container { display: flex; } .container div { width: 33%; height: 60px; } .left { background: yellow; } .right { background: red; } .center { background: lightblue; } Left div centered div right div 

lõhume selle laiali

  • Määratleme alati div  vanema, display:flexkes kandideerimiseks kasutab Flexbox. Seega võimaldame kõigi vanema sees olevate lastega omaduste divabil hakkama saada Flexbox.
  • flex-directionKasutab rowsuunas vaikimisi, mis tähendab elementide pannakse vertikaalselt mahuti sees.
  • Atribuudiga justify-contentsaame joondada divlapse (d) erinevates suundades, näiteks järgmine näide:
.container{ display: flex: justify-content:center /* flex-start, flex-end, space-between, space-evenly, space-around etc */ }
  • justify-content:center  asetab elemendid konteineri keskele.
  • justify-content:flex-start paneb elemendid konteineri algusesse vasakule.
  • justify-content:flex-end asetab elemendid mahuti otsa paremale küljele.
  • justify-content:space-around paneb elemendid mahutisse mahtuma ja paneb kõigi elementide vahele võrdse lõhe.
  • justify-content:space-evenly jaotab vanemmahuti elemendid võrdselt sama ruumi ja sama laiusega.

Ülaltoodud näide kehtib kõigi elementide laste kui rühma kohta.

Kujutage ette, kui me sooviksime divkonteineri sees joondada ühe . Me saame alati kasutada align-selfühe elemendi joondamiseks.

.container div{ align-self:center /* can have: flex-start, or flex-end*/ }

Tekstile võime rakendada sama, mida Flexboxjärgmises näites:

  .right{ display: flex; align-items: flex-end; flex-direction: column; } right div 

See on Julia Evansi suurepärane säuts, mis illustreerib CSS-is keskendumist üldiselt:

Tõmba otsad kokku

CSS-is saab elemente tsentreerida mitmel viisil. Ja üha enam harjutades õpid aja jooksul alati uusi asju.

Seega soovitan teil läbi töötada mõned näited täna õpituist, nii et see jääb külge.

  • Kas peaksite mind Twitteris jälgima?
  • Vaadake My Githubi
  • Külastage minu blogi