Kā pozicionēt tīmekļa elementus, izmantojot CSS vertikālo līdzināšanu

Google meklēšanu









Dekorācijas
Apraksts






Mežs

Lorem ipsum dolor sit amet.






Okeāns

Lorem ipsum dolor sit amet.

The HTML kods iepriekš izveido vienkāršu tīmekļa lapu, kurā ir redzami četri elementi: saistītais teksts, attēls, iegults video un tabula. Jūsu pārlūkprogrammā tam vajadzētu izskatīties šādi:

Kā vertikāli līdzināt tekstu

Pēc noklusējuma lielākā daļa teksta elementu (piemēram, virsraksti,

, un

Tomēr daži teksta elementi, piemēram, un tagi ir iekļauti. Rezultātā tie atbalsta vertikālās izlīdzināšanas īpašumu. Lai vertikāli izlīdzinātu tekstu, vienkārši piešķiriet atbilstošo vērtību CSS vertikālās līdzināšanas rekvizītam.

Vertikāli līdzinātās augšējās teksta vērtības izmantošana

a {
 vertikāli izlīdzināt: augšā;
}

Pievienojot CSS kods virs pamata HTML dokumenta līdzinās augšdaļai atzīmējiet tekstu ar līnijas augstākā elementa augšdaļu. Tiek ražots šāds atjaunināts displejs:

Teksta procentuālās vērtības izmantošana

a {
 vertikālā izlīdzināšana: -50%;
}

Iepriekš redzamais CSS līdzina teksta elementu pozīcijā, kas ir par 50% zem vecākelementa bāzes līnijas. Tas jūsu pārlūkprogrammā rada šādu izvadi:

Kā redzams augstāk esošajā attēlā, teksta elements atrodas zem attēla un video elementiem, kas atrodas vienā rindā. Lai novietotu šo elementu uz bāzes līnijas vai virs tās, izmantojiet pozitīvu procentuālo vērtību.

Teksta garuma vērtības izmantošana

a {
 vertikālā līdzināšana: 90 pikseļi;
}

Iepriekš minētais kods līdzinās teksta elementa bāzes līnijai 90 pikseļu garumā virs vecākelementa bāzes līnijas. Tādējādi pārlūkprogrammā tiek iegūta šāda izvade:

Kā vertikāli izlīdzināt attēlus

The tags ir iekļauts elements, ar kuru CSS vertikālās līdzināšanas rekvizīts labi darbojas.

Vertikāli izlīdzinātās supervērtības izmantošana attēliem

img {
 vertikālā izlīdzināšana: super;
}

Iepriekš minētais kods novieto attēlu vecākelementa virsraksta bāzes līnijā. Tas nozīmē, ka atrodas pozīcijā virs bāzes līnijas, kā redzams šādā izvadā:

Vertikāli izlīdzinātās procentuālās vērtības izmantošana attēliem

img {
 vertikālā izlīdzināšana: 25%;
}

Iepriekš minētais kods izlīdzina attēla elementa bāzes līniju 25% virs vecākelementa bāzes līnijas. Tas rada šādu supervērtības spoguļa efektu:

Vertikāli izlīdzinātās garuma vērtības izmantošana attēliem

img {
 vertikālā līdzināšana: 5 pikseļi;
}

Iepriekš minētais kods izlīdzina attēla elementa bāzes līniju 5 pikseļus virs vecākelementa bāzes līnijas. Tas rada efektu, kas līdzīgs super un 25% vērtībām:

Iegultie multivides materiāli, piemēram, videoklipi un iframe ir iekļauti HTML elementi. Tāpēc CSS vertikālās līdzināšanas rekvizīts lieliski darbojas ar tiem.

Vertikāli izlīdzinātās supervērtības izmantošana videoklipā

video {
 vertikālā līdzināšana: sub;
}

Iepriekš minētais kods novieto videoklipu vecākelementa apakšindeksa bāzes līnijā. Tas nozīmē, ka atrodas pozīcijā zem bāzes līnijas, kā redzams šādā izvadā:

Vertikāli izlīdzinātās procentuālās vērtības izmantošana videoklipā

video {
 vertikālā izlīdzināšana: -25%;
}

Iepriekš minētais kods izlīdzina video elementa bāzes līniju 25% zem vecākelementa bāzes līnijas. Tas rada šādu apakšvērtības spoguļa efektu:

Vertikāli izlīdzinātās garuma vērtības izmantošana videoklipā

video {
 vertikālā līdzināšana: -5 pikseļi;
}

Iepriekš minētais kods izlīdzina attēla elementa bāzes līniju 5 pikseļus zem vecākelementa bāzes līnijas. Tas rada tādu efektu kā sub un -25% vērtības:

Kā vertikāli izlīdzināt vienumus tabulā

Vertikālās līdzināšanas rekvizīta izmantošana ar tabulu ir nedaudz sarežģīta, jo tabula ir bloka elements. Tomēr,

Vertikāli līdzinātās augšējās vērtības izmantošana tabulas datos

td {
 augstums: 40 pikseļi;
 vertikāli izlīdzināt: augšā;
}

Iepriekš minētais kods katrai tabulas šūnai pievieno 40 pikseļu augstumu. Pēc tam tas pielīdzina datus katrā šūnā katras rindas augšpusē. Tādējādi pārlūkprogrammā tiek iegūta šāda izvade:

Vertikāli līdzinātās vidējās vērtības izmantošana tabulas datos

td {
 augstums: 40 pikseļi;
 vertikāli izlīdzināt: vidū;
}

Vertikāli izlīdzinātā vidējā vērtība iepriekš minētajā kodā vertikāli centrē datus katrā šūnā. Tas pārlūkprogrammā rada šādu izvadi:

Vertikāli līdzinātās apakšējās vērtības izmantošana tabulas datos

td {
 augstums: 40 pikseļi;
 vertikāli izlīdzināt: apakšā;
}

Iepriekš minētais kods pielīdzina datus katrā šūnā katras rindas apakšdaļai. Tas pārlūkprogrammā rada šādu izvadi:

Tagad varat saskaņot elementus savā tīmekļa lapā

Tagad varat izmantot CSS vertikālās līdzināšanas rekvizītu ar daudziem dažādiem iekļautiem elementiem, tostarp tekstu, iegulto datu nesēju un tabulas datiem. Vispārīgais noteikums ir tāds, ka vertikālās līdzināšanas rekvizīts darbojas tikai iekļautajos un iekļautajos bloka elementos.

Tomēr jūs varat izmantot šo rekvizītu bloku elementiem, vispirms tie ir jāpārvērš par iekļautiem vai iekļautiem bloka elementiem. Atcerieties, ka varat apvienot vertikālo līdzināšanu ar citiem līdzināšanas rekvizītiem, piemēram, teksta līdzināšanu.

Par autoru

Kadeiša Kīna (Publicēti 52 raksti)

Kadeiša Kīna ir pilnas komplektācijas programmatūras izstrādātāja un tehnisko/tehnoloģiju rakstniece. Viņai ir izteikta spēja vienkāršot dažus no vissarežģītākajiem tehnoloģiskajiem jēdzieniem; ražo materiālu, ko var viegli saprast ikviens tehnoloģiju iesācējs. Viņa aizraujas ar rakstīšanu, interesantas programmatūras izstrādi un ceļošanu pa pasauli (izmantojot dokumentālās filmas).

Vairāk no Kadeisha Kean