Kaip sulygiuoti horizontaliai ir vertikaliai naudojant CSS?

Šiame vadove parodyta horizontalaus ir vertikalaus lygiavimo naudojant CSS procedūra.

• Horizontalus lygiavimas
• Vertikalus lygiavimas

Kaip sulygiuoti horizontaliai ir vertikaliai naudojant CSS?

Kūrėjai naudoja „horizontalų“ ir „vertikalią“ išlygiavimą, norėdami organizuoti ir išdėstyti elementus tinklalapyje. Jie gali būti naudingi lygiuojant elementus ir turinį, pozicionuojant mygtukus ar piktogramas ir kt. Norėdami geriau suprasti, vadovaukitės toliau pateiktais pavyzdžiais:

Horizontalus lygiavimas

CSS teksto lygiavimo ypatybė naudojama horizontaliai lygiuoti tekstui pirminiame elemente. Norėdami geriau suprasti, žr. toliau pateiktus kodo fragmentus:

Aukščiau pateiktame kodo fragmente:

• Pirma, tėvas “ div ' elementas naudojamas su klasės atributu, kurio reikšmė yra ' sąskaitą “.
• Tada buvo sukurti trys antriniai elementai ir kiekvienam div buvo priskirtas klasės atributas.
• Galiausiai klasėms pateikiamos „leftAlign“, „centerAlign“ ir „rightAlign“ reikšmės.

Dabar į „“ įterpkite šias CSS ypatybes “ žyma:

Aukščiau esančiame kodo bloke:

• Pirma, visos trys klasės pasirenkamos atskirai, o tada pritaikykite CSS ypatybes. ekranas “, „ plotis “, „ fono spalva “ ir „ kamšalas ' jiems. Šios savybės naudojamos vizualizavimo tikslams pagerinti.
• Toliau reikšmės „ paliko “, „ centras “ ir „ teisingai “ pateikiami „ teksto lygiavimas ' nuosavybė ' left Lygiuoti “, „ centre Lygiuoti “ ir „ dešinėjeIšlygiuoti “ klases, atitinkamai.

Po kompiliavimo proceso HTML elementai atrodo taip:

Aukščiau pateikta naršyklės nuotrauka rodo, kad elementai yra horizontaliai išlygiuoti kairėje, centre ir dešinėje.

Vertikalus lygiavimas

CSS“ vertikaliai išlyginti ypatybė sulygiuoja pasirinktą elementą su y ašis “ pirminiame elemente. Galimos „vertikalaus lygiavimo“ nuosavybės reikšmės yra „ pradinė linija “, „ sub “, „ super “, „ viršuje “, „ teksto viršuje “, „ vidurio “, „ apačioje “ ir „ tekstas apačioje “. Tačiau kūrėjai kurdami tinklalapių dizainą dažniausiai naudoja „viršuje“, „viduryje“ ir „apačioje“. Norėdami sulygiuoti pasirinktą HTML elementą viršutinėje pozicijoje, apsilankykite toliau pateiktame kodo fragmente:

Aukščiau pateiktame kodo fragmente:

• Pirmiausia sukurkite tėvą “ div ' elementą ir priskirkite reikšmę ' skaičiuoti “ į „ klasė “ atributas.
• Pirminiame konteineryje naudokite „ “ žymą ir pateikite vaizdo kelią kaip reikšmę „ src “ atributas.
• Be to, nurodykite „ 200 piks “ tiek „ plotis “ ir „ aukščio ' atributai ' “ žymą.
• Tada naudokite „ “ žymą ir suteikite jai „klasę“ antraštėTopAlign “. Galiausiai pateikite netikrus duomenis.

Dabar pridėkite CSS ypatybes, kad sukurtumėte HTML elementų stilių:

Aukščiau esančiame kodo bloke:

• Pirmiausia pasirinkite tėvą “ skaičiuoti “ klasėje ir pateikite vertes „fit-content“, „block“, „100px“, „10px“ ir „2px solid red“ į CSS „ plotis “, „ ekranas “, „ paraštė-kairė “, „ kamšalas “ ir „ siena “ savybes. Šios savybės naudojamos pagrindinio elemento stiliui sukurti.
• Tada pasirinkite „ antraštėTopAlign “ klasę ir pateikite „“ vertę viršuje 'į CSS' vertikaliai išlyginti ' nuosavybė. Dėl to HTML elementas sulygiuotas su viršutine pozicija.

Įvykdžius aukščiau nurodytas kodo eilutes, tinklalapis atrodo taip:

Aukščiau pateikta momentinė nuotrauka rodo, kad pasirinktas HTML elementas dabar sulygiuotas viršuje. Tuo pačiu būdu elementą galima išlygiuoti vidurio, apačios kryptimis ir kt.

Išvada

Jei norite išlygiuoti horizontaliai ir vertikaliai, „ teksto lygiavimas “ ir „ vertikaliai išlyginti Naudojamos atitinkamai CSS savybės. Ypatybė „text-align“ leidžia naudoti „ paliko “, „ teisingai “, „ centras “ ir „ pateisinti “. Kita vertus, galimos „vertikalaus lygiavimo“ savybės vertės yra „ pradinė linija “, „ sub “, „ super “, „ viršuje “, „ teksto viršuje “, „ vidurio “, „ apačioje “ ir „ tekstas apačioje “. Horizontalus ir vertikalus lygiavimas padeda sukurti švarų ir profesionalų interneto dizainą.