Šajā rokasgrāmatā ir parādīta horizontālās un vertikālās izlīdzināšanas procedūra, izmantojot CSS.
Kā horizontāli un vertikāli izlīdzināt, izmantojot CSS?
Izstrādātāji izmanto “horizontālo” un “vertikālo” līdzinājumu, lai sakārtotāk sakārtotu un novietotu elementus tīmekļa lapā. Tie var būt noderīgi, lai izlīdzinātu elementus un saturu, pozicionēšanas pogas vai ikonas utt. Lai labāk izprastu, izpildiet tālāk sniegtos piemērus.
Horizontālā izlīdzināšana
CSS teksta līdzināšanas rekvizīts tiek izmantots, lai horizontāli līdzinātu tekstu tā vecākelementā. Apmeklējiet tālāk norādītos koda fragmentus, lai labāk izprastu:
< ķermeni >
< div klasē = 'konts' >
< div klasē = 'LeftAlign' > Linuxhint ir izlīdzināts pa kreisi < / div >
< div klasē = 'centra izlīdzināšana' > Linuxhint ir Center Align < / div >
< div klasē = 'pa labi līdzināt' > Linuxhint ir Right Align < / div >
< / div >
< / ķermeni >
Iepriekš minētajā koda fragmentā:
- Pirmkārt, vecāks ' div 'elements tiek izmantots ar klases atribūtu, kura vērtība ir ' konts ”.
- Pēc tam ir izveidoti trīs pakārtotie elementi un katram div ir piešķirts klases atribūts.
- Noslēgumā klasēm tiek nodrošinātas vērtības “leftAlign”, “centerAlign” un “rightAlign”.
Tagad ievietojiet šādus CSS rekvizītus
.pa kreisiIzlīdzināt {
displejs : iekļauts bloks ;
platums : 30% ;
polsterējums : 20 pikseļi ;
fona krāsa : mežzaļš ;
teksta līdzināšana : pa kreisi ;
}
.centerAlign {
displejs : iekļauts bloks ;
platums : 30% ;
fona krāsa : sarkans ;
polsterējums : 20 pikseļi ;
teksta līdzināšana : centrs ;
}
.Pa labiIzlīdzināt {
displejs : iekļauts bloks ;
platums : 30% ;
fona krāsa : zilganzaļa ;
polsterējums : 20 pikseļi ;
teksta līdzināšana : pa labi ;
}
>
Iepriekš minētajā koda blokā:
- Vispirms visas trīs klases tiek atlasītas atsevišķi un pēc tam tiek lietoti CSS rekvizīti. displejs ”, “ platums ”, “ fona krāsa ' un ' polsterējums ' viņiem. Šīs īpašības tiek izmantotas, lai uzlabotu vizualizācijas mērķus.
- Tālāk vērtības ' pa kreisi ”, “ centrs ' un ' pa labi ' tiek nodrošināti ' teksta līdzināšana ' īpašums ' pa kreisiIzlīdzināt ”, “ centrsIzlīdzināt ', un ' pa labiIzlīdzināt ” nodarbības, attiecīgi.
Pēc kompilācijas procesa HTML elementi izskatās šādi:
Iepriekš redzamajā pārlūkprogrammas momentuzņēmumā redzams, ka elementi ir horizontāli līdzināti kreisajā, centrā un labajā pozīcijā.
Vertikālā izlīdzināšana
CSS ' vertikāli izlīdzināt rekvizīts saskaņo atlasīto elementu ar ' y ass ” savā vecākelementā. Iespējamās rekvizīta “vertikāli izlīdzināšanas” vērtības ir “ bāzes līnija ”, “ apakš ”, “ super ”, “ tops ”, “ teksta augšdaļa ”, “ vidū ”, “ apakšā ', un ' teksts-apakšā ”. Tomēr izstrādātāji, veidojot tīmekļa lapu dizainu, lielākoties izmanto vērtības “augšējā”, “vidējā” un “apakšējā”. Lai līdzinātu atlasīto HTML elementu augšējā pozīcijā, apmeklējiet tālāk norādīto koda fragmentu:
< div klasē = 'skaitīt' >< img src = 'hiunsplash.jpg' platums = '200 pikseļi' augstums = '200 pikseļi' >
< span klasē = 'CaptionTopAlign' > Šis teksts ir līdzināts augšpusē vertikāli blakus attēlam < / span >
< / div >
Iepriekš minētajā koda fragmentā:
- Vispirms izveidojiet vecāku ' div ' elementu un piešķiriet vērtību ' skaitīt 'uz' klasē ” atribūts.
- Vecākkonteinerā izmantojiet “
' tagu un norādiet attēla ceļu kā vērtību uz ' src ” atribūts.
- Turklāt norādiet vērtību “ 200 pikseļi 'uz abiem' platums ' un ' augstums ' atribūti no '
” tagu.
- Pēc tam izmantojiet ' ' tagu un norādiet tai klasi ' captionTopAlign ”. Beigās sniedziet tam fiktīvus datus.
Tagad pievienojiet CSS rekvizītus, lai veidotu HTML elementu stilu:
.count {platums : atbilstošs saturs ;
displejs : bloķēt ;
piemale-kreisais : 100 pikseļi ;
polsterējums : 10 pikseļi ;
robeža : 2 pikseļi ciets sarkans ;
}
.captionTopAlign {
vertikāli
Iepriekš minētajā koda blokā:
- Vispirms atlasiet vecāku ' skaitīt ” klasē un norādiet vērtības “fit-content”, “block”, “100px”, “10px” un “2px solid red” CSS “ platums ”, “ displejs ”, “ piemale-kreisais ”, “ polsterējums ' un ' robeža ” īpašības. Šīs īpašības tiek izmantotas, lai veidotu vecākelementa stilu.
- Pēc tam atlasiet “ captionTopAlign ” klasē un sniedz vērtību “ tops 'uz CSS' vertikāli izlīdzināt ” īpašums. Tādējādi HTML elements tiek līdzināts augšējai pozīcijai.
Pēc iepriekš minēto koda rindu izpildes tīmekļa lapa izskatās šādi:
Iepriekš redzamajā momentuzņēmumā redzams, ka atlasītais HTML elements tagad ir līdzināts augšpusē. Tādā pašā veidā elementu var izlīdzināt vidējā, apakšējā virzienā utt.
Secinājums
Lai veiktu horizontālo un vertikālo izlīdzināšanu, ' teksta līdzināšana ' un ' vertikāli izlīdzināt ” Tiek izmantoti attiecīgi CSS rekvizīti. Rekvizīts “text-align” pieļauj vērtību “ pa kreisi ”, “ pa labi ”, “ centrs ' un ' attaisnot ”. No otras puses, rekvizīta “vertikāli izlīdzināšanas” iespējamās vērtības ir “ bāzes līnija ”, “ apakš ”, “ super ”, “ tops ”, “ teksta augšdaļa ”, “ vidū ”, “ apakšā ', un ' teksts-apakšā ”. Horizontālā un vertikālā izlīdzināšana palīdz izveidot tīru un profesionālu tīmekļa dizainu.