Kuidas CSS-i abil horisontaalselt ja vertikaalselt joondada?

See juhend näitab CSS-i abil horisontaalse ja vertikaalse joondamise protseduuri.

• Horisontaalne joondamine
• Vertikaalne joondus

Kuidas CSS-i abil horisontaalselt ja vertikaalselt joondada?

Arendajad kasutavad 'horisontaalset' ja 'vertikaalset' joondust, et korraldada ja paigutada veebilehel elemente paremini organiseeritud viisil. Need võivad olla kasulikud elementide ja sisu joondamisel, nuppude või ikoonide jne paigutamisel. Parema mõistmise jaoks järgige allolevaid näiteid.

Horisontaalne joondamine

CSS-is kasutatakse teksti joondamise atribuuti teksti horisontaalseks joondamiseks selle emaelemendis. Parema mõistmise jaoks külastage allolevaid koodilõike:

Ülaltoodud koodilõigul:

• Esiteks, vanem ' div elementi kasutatakse klassi atribuudiga, mille väärtus on ' konto ”.
• Järgmiseks on loodud kolm alamelementi ja igale div on määratud klassi atribuut.
• Lõpuks antakse klassidele väärtused 'leftAlign', 'centerAlign' ja 'rightAlign'.

Nüüd sisestage järgmised CSS-i atribuudid ' ” silt:

Ülaltoodud koodiplokis:

• Esiteks valitakse kõik kolm klassi eraldi ja seejärel rakendatakse CSS-i atribuute ' kuva ”, “ laius ”, “ taustavärv ” ja „ polsterdus ' neile. Neid omadusi kasutatakse visualiseerimise parandamiseks.
• Järgmiseks väärtused ' vasakule ”, “ Keskus ” ja „ õige ' on esitatud ' teksti joondamine ' vara ' vasakuleJoonda ”, “ keskelJoonda ”, ja „ paremaleJoonda ” klassid vastavalt.

Pärast kompileerimisprotsessi näevad HTML-i elemendid välja järgmised:

Ülaltoodud brauseri hetktõmmis näitab, et elemendid on horisontaalselt joondatud vasakul, keskel ja paremal.

Vertikaalne joondus

CSS' vertikaalne joondamine atribuut ” joondab valitud elemendi elemendiga y-telg ” oma emaelemendis. Vertikaalse joondamise atribuudi võimalikud väärtused on baasjoon ”, “ alam ”, „ Super ”, “ üleval ”, “ tekstipealne ”, “ keskel ”, “ põhja ”, ja „ tekst-alumine ”. Kuid arendajad kasutavad veebilehtede kujunduse loomisel enamasti väärtusi 'ülemine', 'keskmine' ja 'alumine'. Valitud HTML-i elemendi ülemisse positsiooni joondamiseks külastage allolevat koodilõiku:

Ülaltoodud koodilõigul:

• Esiteks looge vanem ' div ' element ja määrake väärtus ' loendama ' juurde ' klass ” atribuut.
• Kasutage emakonteineris ' märgend ja määrake pildi tee väärtusena src ” atribuut.
• Lisaks esitage väärtus ' 200 pikslit ' mõlemale ' laius ” ja „ kõrgus '' atribuudid ” silti.
• Järgmisena kasutage ' märgend ja lisage sellele klass ' pealdisTopAlign ”. Lõpuks esitage sellele näilikud andmed.

Nüüd lisage HTML-i elementide stiilimiseks CSS-i atribuudid:

Ülaltoodud koodiplokis:

• Esmalt valige vanem ' loendama ” klassi ja esitage CSS-ile väärtused „fit-content”, „block”, „100px”, „10px” ja „2px solid red”. laius ”, „ kuva ”, „ margin-vasak ”, „ polsterdus ” ja „ piir ” omadused. Neid omadusi kasutatakse põhielemendi stiili kujundamiseks.
• Järgmisena valige ' pealdisTopAlign ' klassi ja esitage väärtus ' üleval 'CSS-i' vertikaalne joondamine ” vara. See joondab HTML-elemendi ülemise positsiooniga.

Pärast ülaltoodud koodiridade täitmist näeb veebileht välja selline:

Ülaltoodud hetktõmmis näitab, et valitud HTML-element on nüüd ülevalt joondatud. Samamoodi saab elementi joondada kesk-, põhjasuunas jne.

Järeldus

Horisontaalseks ja vertikaalseks joondamiseks on ' teksti joondamine ” ja „ vertikaalne joondamine ” Kasutatakse vastavalt CSS-i atribuute. Atribuut 'teksti joondamine' võimaldab väärtust ' vasakule ”, „ õige ”, „ Keskus ” ja „ õigustada ”. Teisest küljest on atribuudi „vertikaalse joondamise” võimalikud väärtused „ baasjoon ”, „ alam ”, „ Super ”, „ üleval ”, „ tekstipealne ”, „ keskel ”, „ põhja ”, ja „ tekst-alumine ”. Horisontaalne ja vertikaalne joondus aitab luua puhtaid ja professionaalseid veebikujundusi.