Bloku izlīdzināšana pēc augstuma. CSS — līdzināt bloku centrā. Attēla centrēšana, izmantojot līnijas augstumu
Izkārtojot lapu, bieži vien ir nepieciešams veikt centra izlīdzināšanu, izmantojot CSS metodi: piemēram, centrējot galveno bloku. Šīs problēmas risināšanai ir vairākas iespējas, no kurām katra agrāk vai vēlāk ir jāizmanto jebkuram maketētājam.
Teksta līdzinājums centrā
Bieži vien dekoratīvos nolūkos ir nepieciešams iestatīt teksta līdzinājumu centrā, šajā gadījumā tas ļauj samazināt izkārtojuma laiku. Iepriekš tas tika darīts, izmantojot HTML atribūtus, bet tagad standarts pieprasa teksta līdzināšanu, izmantojot stila lapas. Atšķirībā no blokiem, kuriem jāmaina piemales, CSS teksta centrēšana tiek veikta, izmantojot vienu rindiņu:
- text-align:center;
Šis īpašums tiek mantots un nodots no vecākiem visiem pēcnācējiem. Ietekmē ne tikai tekstu, bet arī citus elementus. Lai to izdarītu, tiem jābūt iekļautiem (piemēram, span) vai iekļautiem blokiem (jebkuriem blokiem, kuriem ir iestatīts rekvizīts Display: block). Pēdējā opcija ļauj arī mainīt elementa platumu un augstumu, kā arī elastīgāk pielāgot ievilkumus.
Bieži lapās līdzināšana tiek piešķirta pašam tagam. Tas nekavējoties padara kodu nederīgu, jo W3C ir novecojis izlīdzināšanas atribūtu. Nav ieteicams to izmantot lapā.
Bloka izlīdzināšana centrā
Ja nepieciešams centrēt div, CSS piedāvā diezgan ērtu veidu: izmantot piemales. Atkāpes var iestatīt gan bloka elementiem, gan iekļautajiem bloka elementiem. Īpašuma vērtībai ir jābūt 0 (vertikālā polsterējums) un automātiskajai (automātiskajai horizontālajai polsterēšanai):
- margin:0 auto;
Tagad šī iespēja ir atzīta par absolūti derīgu. Izmantojot ārējo polsterējumu, varat arī iestatīt attēla centrējumu: tas ļauj atrisināt daudzas problēmas, kas saistītas ar elementa novietojumu lapā.
Izlīdziniet bloku pa kreisi vai pa labi
Dažreiz CSS centra izlīdzināšana nav nepieciešama, bet jums ir jānovieto divi bloki blakus: viens kreisajā malā, otrs labajā. Šim nolūkam ir peldošs rekvizīts, kuram var būt viena no trim vērtībām: pa kreisi, pa labi vai neviena. Pieņemsim, ka jums ir divi bloki, kas jānovieto blakus. Tad kods būs šāds:
- .left (peld:pa kreisi;)
- .right(peldēt:pa labi)
Ja ir arī trešais bloks, kuram jāatrodas zem pirmajiem diviem blokiem (piemēram, kājene), tad tam ir jāpiešķir skaidrs īpašums:
- .left (peld:pa kreisi;)
- .right(peldēt:pa labi)
- kājene (notīrīt: abi)
Fakts ir tāds, ka bloki ar klasēm pa kreisi un pa labi izkrīt no vispārējās plūsmas, tas ir, visi pārējie elementi ignorē saskaņoto elementu esamību. Rekvizīts Clear:both ļauj kājenei vai jebkuram citam blokam redzēt elementus, kas ir izkrituši no plūsmas, un aizliedz peldēšanu gan kreisajā, gan labajā pusē. Tāpēc mūsu piemērā kājene pārvietosies uz leju.
Vertikālā izlīdzināšana
Ir gadījumi, kad nepietiek ar centra līdzinājuma iestatīšanu, izmantojot CSS metodes, ir jāmaina arī bērna bloka vertikālā pozīcija. Jebkurš iekļauts vai iekļauts bloka elements var būt ligzdots augšējā vai apakšējā malā, vecākelementa vidū vai jebkurā vietā. Visbiežāk bloks ir jāsaskaņo ar centru, lai to izdarītu, tiek izmantots vertikālās izlīdzināšanas atribūts. Pieņemsim, ka ir divi bloki, viens ligzdots otrā. Šajā gadījumā iekšējais bloks ir iekļauts bloka elements (displejs: inline-block). Bērnu bloks ir jāizlīdzina vertikāli:
- augšējais izlīdzinājums - .child(vertikāli-līdzināt:augšā);
- līdzinājums centrā - .child(vertikāli-līdzināt:vidus);
- apakšējā izlīdzināšana - .child(vertikāli-līdzināt:apakšā);
Ne teksta līdzināšana, ne vertikālā līdzināšana neietekmē bloka elementus.
Iespējamas problēmas ar izlīdzinātiem blokiem
Dažreiz div centrēšana, izmantojot CSS, var radīt nelielas problēmas. Piemēram, izmantojot pludiņu: pieņemsim, ka ir trīs bloki: .first, .second un .third. Otrais un trešais bloks atrodas pirmajā. Elements ar otro klasi ir līdzināts pa kreisi, bet pēdējais bloks ir līdzināts pa labi. Pēc izlīdzināšanas abi izkrita no plūsmas. Ja vecākajam elementam nav iestatīts augstums (piemēram, 30 em), tas vairs netiks izstiepts tā pakārtoto bloku augstumā. Lai izvairītos no šīs kļūdas, izmantojiet starpliku – īpašu bloku, kas redz .second un .third. CSS kods:
- .second(peld:pa kreisi)
- .third(peldēt:pa labi)
- .clearfix(height:0; clear: abi;)
Bieži tiek izmantota pseidoklase: pēc, kas arī ļauj atgriezt blokus savās vietās, izveidojot pseido starpliku (piemērā div ar konteinera klasi atrodas iekšā.first un satur.left un.right) :
- .left(peldēt:pa kreisi)
- .right(peldēt:pa labi)
- .container:after(content:""; displejs:tabula; notīrīt:abi;)
Iepriekš minētās iespējas ir visizplatītākās, lai gan ir vairākas variācijas. Eksperimentējot vienmēr varat atrast visvienkāršāko un ērtāko veidu, kā izveidot pseido starpliku.
Vēl viena problēma, ar kuru bieži saskaras izkārtojuma dizaineri, ir iekļauto bloku elementu izlīdzināšana. Aiz katra no tiem automātiski tiek pievienota atstarpe. Maržas rekvizīts, kas ir iestatīts uz negatīvu atkāpi, palīdz ar to tikt galā. Ir arī citas metodes, kas tiek izmantotas daudz retāk: piemēram, nulles noteikšana Šajā gadījumā galvenā elementa īpašībās tiek ierakstīts font-size: 0. Ja blokos ir teksts, tad nepieciešamais fonta lielums jau tiek atgriezts inline-block elementu rekvizītos. Piemēram, font-size:1em. Šī metode ne vienmēr ir ērta, tāpēc daudz biežāk tiek izmantota iespēja ar ārējiem ievilkumiem.
Bloku izlīdzināšana ļauj izveidot skaistas un funkcionālas lapas: tas ietver vispārējā izkārtojuma izkārtojumu, preču izkārtojumu tiešsaistes veikalos un fotogrāfijas vizītkaršu vietnē.
No autora: Es atkal sveicu jūs mūsu emuāra lapās. Šodienas rakstā vēlos runāt par dažādām līdzināšanas tehnikām, kuras var pielietot gan blokiem, gan to saturam. Jo īpaši, kā izlīdzināt blokus css, kā arī teksta izlīdzināšanu.
Bloku izlīdzināšana centrā
CSS bloka centrēšana ir vienkārša. Šī ir daudziem vispazīstamākā tehnika, bet es par to gribētu runāt tieši tagad, pirmkārt. Tas nozīmē horizontāli centrētu izlīdzināšanu attiecībā pret pamatelementu. Kā tas tiek darīts? Pieņemsim, ka mums ir konteiners un tajā atrodas mūsu eksperimentālais objekts:
< div id = "wrapper" > < div id = "header" > < / div > < / div > |
Pieņemsim, ka šī ir vietnes galvene. Tas neizstiepjas visā loga platumā, un mums tas ir jācentrē. Mēs rakstām šādi:
#header( platums / maksimālais platums: 800 pikseļi; piemale: 0 auto; |
Mums ir jānorāda precīzs vai maksimālais platums un pēc tam pierakstiet atslēgas rekvizītu - margin: 0 auto. Tas nosaka mūsu galvenes ārējās piemales, pirmā vērtība nosaka augšējo un apakšējo piemali, bet otrā - labās un kreisās malas. Automātiskā vērtība liek pārlūkprogrammai automātiski aprēķināt abās pusēs esošo polsterējumu, lai elements būtu precīzi centrēts vecākajā. Ērti!
Teksta izlīdzināšana
Šī ir arī ļoti vienkārša tehnika. Lai līdzinātu visus iekļautos elementus, varat izmantot teksta līdzināšanas rekvizītu un tā vērtības: pa kreisi, pa labi, centrā. Pēdējais centrē tekstu, kas mums ir vajadzīgs. Jūs pat varat līdzināt attēlu tādā pašā veidā, jo tas pēc noklusējuma ir arī iekļauts elements.
Izlīdziniet tekstu vertikāli
Bet tas ir sarežģītāk. Pēc noklusējuma nav vienkārša, labi zināma rekvizīta, kas viegli centrētu tekstu vertikāli bloka konteinerā. Tomēr ir vairākas metodes, kuras izkārtojuma dizaineri ir izstrādājuši gadu gaitā.
Iestatiet bloka augstumu, izmantojot polsterējumu. Veids ir nevis iestatīt skaidru augstumu, izmantojot augstumu, bet gan izveidot to mākslīgi, izmantojot polsterējumus augšpusē un apakšā, kam jābūt vienādam. Izveidosim jebkuru bloku un ierakstīsim tam šādus rekvizītus:
div (fons: #ccc; polsterējums: 30 pikseļi 0; )
div( fons : #ccc; polsterējums: 30 pikseļi 0; |
Fons ir paredzēts tikai, lai vizuāli parādītu malas, kā arī polsterējumu. Tagad bloka augstumu veido šie divi ievilkumi un pati līnija, un tas viss izskatās šādi:
Definējiet bloka līnijas augstumu. Es domāju, ka tas ir pareizāks veids, ja jums ir jāizlīdzina viena teksta rindiņa. Ar to jūs varat rakstīt augstumu atbilstoši parastajam, izmantojot augstuma īpašību. Pēc tam viņam ir jāiestata arī līnijas augstums, kas ir tāds pats kā bloka augstums kopumā.
div( augstums: 60 pikseļi; līnijas augstums: 60 pikseļi; )
div( augstums: 60 pikseļi; līnijas augstums: 60 pikseļi; |
Rezultāts būs līdzīgs iepriekš redzamajam attēlam. Viss darbosies pat tad, ja pievienosiet polsterējumu. Tomēr tikai vienai rindai. Ja elementā nepieciešams vairāk teksta, šī metode nedarbosies.
Pārvērst bloku par tabulas šūnu. Šīs metodes būtība ir tāda, ka tabulas šūnai ir īpašība Vertikāli izlīdzināt: vidus, kas centrē elementu vertikāli. Attiecīgi šajā gadījumā bloks ir jāiestata uz šādu:
div (displejs: tabulas šūna; vertikālais līdzinājums: vidū; )
div( displejs: tabula - šūna; vertikāli - izlīdzināt: vidū; |
Šī metode ir laba, jo centrā varat līdzināt tik daudz teksta, cik vēlaties. Bet labāk ir rakstīt displejs: tabulu blokam, kurā ir ligzdots mūsu div, pretējā gadījumā tas var nedarboties.
Nu, lūk, mēs nonākam pie pēdējās šodienas tehnikas - tā ir pašu bloku vertikālā izlīdzināšana. Jāsaka, ka atkal nav neviena īpašuma, kas būtu paredzēts tieši šim, taču ir dažas viltības, par kurām būtu jāzina.
Iestatiet atkāpes kā procentus. Ja zināt vecāka elementa augstumu un ievietojat tajā citu bloka elementu, varat to centrēt, izmantojot procentuālo polsterējumu. Piemēram, vecākam ir 600 pikseļu augstums. Jūs ievietojat tajā bloku, kura augstums ir 300 pikseļi. Cik daudz jums jāatkāpjas augšā un apakšā, lai to centrētu? Katrs 150 pikseļi, kas ir 25% no vecāka auguma.
Šī metode ļauj izlīdzināt tikai tad, ja izmēri ļauj veikt aprēķinus. Un, ja jūsu vecāks ir 887 pikseļus garš, tad jūs nevarēsiet neko precīzi ierakstīt, tas jau ir skaidrs.
Ievietojiet elementu tabulas šūnā. Atkal, ja mēs pārveidosim vecāku elementu par tabulas šūnu, tad tajā ievietotais bloks tiks automātiski centrēts vertikāli. Lai to izdarītu, vecākam vienkārši jāiestata vertikālā līdzināšana: vidus.
Un, ja papildus tam mēs rakstām arī piemali: 0 auto, tad elements kļūs horizontāli centrēts!
Es domāju, ka daudzi no jums, kuriem ir nācies saskarties ar izkārtojumu, ir saskārušies ar nepieciešamību izlīdzināt elementus vertikāli un zina grūtības, kas rodas, izlīdzinot elementu līdz centram.
Jā, vertikālai līdzināšanai CSS ir īpašs vairāku vērtību vertikālās izlīdzināšanas rekvizīts. Tomēr praksē tas nemaz nedarbojas, kā gaidīts. Mēģināsim to izdomāt.
Salīdzināsim šādas pieejas. Saskaņošana ar:
- galdi,
- ievilkums,
- līnijas augstums
- stiepšanās,
- negatīva rezerve,
- pārveidot
- pseido elements
- flexbox.
Ir divi div elementi, un viens no tiem ir ievietots otrā. Piešķirsim viņiem atbilstošās klases – ārējo un iekšējo.
Izaicinājums ir saskaņot iekšējo elementu ar ārējā elementa centru.
Pirmkārt, aplūkosim gadījumu, kad ārējo un iekšējo bloku izmēri zināms. Pievienosim kārtulas displeju: inline-block iekšējam elementam un teksta līdzināšanu: centrā un vertikālo līdzinājumu: vidu ārējam elementam.
Atcerieties, ka līdzināšana attiecas tikai uz elementiem, kuriem ir iekļauts vai iekļauts bloks displeja režīms.
Iestatīsim bloku izmērus, kā arī fona krāsas, lai mēs varētu redzēt to apmales.
Ārējais (platums: 200 pikseļi; augstums: 200 pikseļi; teksta līdzinājums: centrā; vertikālais līdzinājums: vidū; fona krāsa: #ffc; ) .inner ( displejs: iekļauts bloks; platums: 100 pikseļi; augstums: 100 pikseļi; fona krāsa : #fcc )
Pēc stilu pielietošanas redzēsim, ka iekšējais bloks ir izlīdzināts horizontāli, bet ne vertikāli:
http://jsfiddle.net/c1bgfffq/
Kāpēc tas notika? Lieta ir tāda, ka vertikālās izlīdzināšanas īpašība ietekmē izlīdzināšanu pats elements, nevis tā saturs(izņemot gadījumus, kad tas tiek lietots tabulas šūnām). Tāpēc šīs īpašības pielietošana ārējam elementam neko nedeva. Turklāt šī īpašuma pielietošana iekšējam elementam arī neko nedos, jo iekļautie bloki ir izlīdzināti vertikāli attiecībā pret blakus esošajiem blokiem, un mūsu gadījumā mums ir viens iekļauts bloks.
Šīs problēmas risināšanai ir vairākas metodes. Tālāk mēs sīkāk aplūkosim katru no tiem.
Izlīdzināšana, izmantojot tabulu
Pirmais risinājums, kas nāk prātā, ir aizstāt ārējo bloku ar vienas šūnas tabulu. Šajā gadījumā līdzinājums tiks piemērots šūnas saturam, tas ir, iekšējam blokam.
http://jsfiddle.net/c1bgfffq/1/
Šī risinājuma acīmredzamais trūkums ir tāds, ka no semantiskā viedokļa nav pareizi izmantot tabulas izlīdzināšanai. Otrs trūkums ir tāds, ka tabulas izveidei ap ārējo bloku ir jāpievieno vēl viens elements.
Pirmo mīnusu var daļēji noņemt, aizstājot tabulu un td tagus ar div un iestatot tabulas attēlošanas režīmu CSS.
.outer-wrapper ( displejs: tabula; ) .outer ( displejs: tabulas šūna; )
Tomēr ārējais bloks joprojām paliks galds ar visām no tā izrietošajām sekām.
Izlīdzināšana, izmantojot atkāpes
Ja ir zināmi iekšējo un ārējo bloku augstumi, tad izlīdzinājumu var iestatīt, izmantojot iekšējā bloka vertikālās atkāpes, izmantojot formulu: (H ārējais – H iekšējais) / 2.Ārējais ( augstums: 200 pikseļi; ) .iekšējais ( augstums: 100 pikseļi; mala: 50 pikseļi 0; )
http://jsfiddle.net/c1bgfffq/6/
Risinājuma trūkums ir tas, ka tas ir piemērojams tikai ierobežotā skaitā gadījumu, kad ir zināmi abu bloku augstumi.
Izlīdzināšana, izmantojot līnijas augstumu
Ja zināt, ka iekšējam blokam nevajadzētu aizņemt vairāk par vienu teksta rindiņu, varat izmantot rekvizītu line-height un iestatīt to vienādu ar ārējā bloka augstumu. Tā kā iekšējā bloka saturam nevajadzētu pāriet uz otro rindu, ieteicams pievienot arī atstarpi: nowrap un overflow: paslēptie noteikumi.Ārējais ( augstums: 200 pikseļi; līnijas augstums: 200 pikseļi; ) .iekšējais ( atstarpe: bez iesaiņojuma; pārplūde: paslēpta; )
http://jsfiddle.net/c1bgfffq/12/
Šo paņēmienu var izmantot arī vairāku rindiņu teksta līdzināšanai, ja no jauna definējat iekšējā bloka līnijas augstuma vērtību un pievienojat arī displeju: iekļauts bloks un vertikālais līdzinājums: vidējie noteikumi.
Ārējais ( augstums: 200 pikseļi; līnijas augstums: 200 pikseļi; ) .iekšējais ( līnijas augstums: normāls; displejs: iekļauts bloks; vertikālais līdzinājums: vidū; )
http://jsfiddle.net/c1bgfffq/15/
Šīs metodes trūkums ir tāds, ka ir jāzina ārējā bloka augstums.
Izlīdzināšana, izmantojot "stiepšanu"
Šo metodi var izmantot, ja ārējā bloka augstums nav zināms, bet iekšējā bloka augstums ir zināms.Lai to izdarītu, jums ir nepieciešams:
- iestatīt relatīvo pozicionēšanu ārējam blokam un absolūto pozicionēšanu iekšējam blokam;
- pievienojiet iekšējam blokam noteikumus augšā: 0 un apakšā: 0, kā rezultātā tas izstiepsies visā ārējā bloka augstumā;
- iestatiet iekšējā bloka vertikālo polsterējumu uz automātisku.
http://jsfiddle.net/c1bgfffq/4/
Šīs metodes ideja ir tāda, ka, iestatot augstumu izstieptam un absolūti novietotam blokam, pārlūkprogramma aprēķina vertikālo polsterējumu vienādās proporcijās, ja tas ir iestatīts uz automātisku.
Līdzinājums ar negatīvo malu augšpusē
Šī metode ir kļuvusi plaši pazīstama un tiek izmantota ļoti bieži. Tāpat kā iepriekšējo, to izmanto, ja nav zināms ārējā bloka augstums, bet ir zināms iekšējā bloka augstums.Ārējam blokam ir jāiestata relatīvā pozicionēšana, bet iekšējam blokam absolūtā pozicionēšana. Pēc tam jums jāpārvieto iekšējais bloks uz leju par pusi no ārējā bloka augšdaļas augstuma: 50% un jāpaaugstina uz pusi tā paša augstuma malas augšdaļa: -H iekšējais / 2.
Ārējais (pozīcija: relatīvs; ) .iekšējais (augstums: 100 pikseļi; pozīcija: absolūts; augšdaļa: 50%; mala augšpusē: -50 pikseļi; )
http://jsfiddle.net/c1bgfffq/13/
Šīs metodes trūkums ir tāds, ka ir jāzina iekštelpu bloka augstums.
Saskaņošana ar transformāciju
Šī metode ir līdzīga iepriekšējai, taču to var izmantot, ja nav zināms iekštelpu bloka augstums. Šajā gadījumā tā vietā, lai iestatītu negatīvu pikseļu pildījumu, varat izmantot transformācijas rekvizītu un pārvietot iekšējo bloku uz augšu, izmantojot funkciju translateY un vērtību -50% .Ārējais ( pozīcija: relatīvs; ) .inner ( pozīcija: absolūta; augšā: 50%; pārveidot: tulkot Y(-50%); )
http://jsfiddle.net/c1bgfffq/9/
Kāpēc iepriekšējā metodē nebija iespējams iestatīt vērtību procentos? Tā kā procentuālās piemales vērtības tiek aprēķinātas attiecībā pret pamatelementu, 50% vērtība būtu puse no ārējās kastes augstuma, un mums būtu jāpaaugstina iekšējā kaste līdz pusei no paša augstuma. Pārveidošanas īpašums tam ir lieliski piemērots.
Šīs metodes trūkums ir tāds, ka to nevar izmantot, ja iekštelpu blokam ir absolūta pozicionēšana.
Saskaņošana ar Flexbox
Vismodernākais vertikālās izlīdzināšanas veids ir izmantot Flexible Box Layout (tautā pazīstams kā Flexbox). Šis modulis ļauj elastīgi kontrolēt elementu izvietojumu lapā, izkārtojot tos gandrīz jebkur. Flexbox izlīdzināšana centrā ir ļoti vienkāršs uzdevums.Ārējais bloks ir jāiestata, lai parādītu: flex un iekšējais bloks, lai margin: auto . Un viss! Skaisti, vai ne?
Ārējais (displejs: elastīgs; platums: 200 pikseļi; augstums: 200 pikseļi; ) .iekšējais (platums: 100 pikseļi; mala: automātisks; )
http://jsfiddle.net/c1bgfffq/14/
Šīs metodes trūkums ir tāds, ka Flexbox atbalsta tikai mūsdienu pārlūkprogrammas.
Kuru metodi man vajadzētu izvēlēties?
Jums jāsāk ar problēmas izklāstu:- Lai vertikāli līdzinātu tekstu, labāk ir izmantot vertikālas atkāpes vai rekvizītu line-height.
- Absolūti pozicionētiem elementiem ar zināmu augstumu (piemēram, ikonām) metode ar negatīvu augšējās malas rekvizītu ir ideāla.
- Sarežģītākos gadījumos, kad bloka augstums nav zināms, ir jāizmanto pseidoelements vai transformācijas rekvizīts.
- Nu, ja jums ir tik paveicies, ka jums nav jāatbalsta vecākas IE pārlūkprogrammas versijas, tad, protams, labāk ir izmantot Flexbox.
Bieži vien izkārtojuma laikā ir nepieciešama teksta vertikāla līdzināšana blokā. Ja tas ir jādara tabulas šūnā, tiek iestatīta vertikālās līdzināšanas CSS rekvizīta vērtība.
Taču rodas pamatots jautājums: vai var iztikt bez tabulas, nepārslogojot lapas izkārtojumu ar nevajadzīgiem tagiem? Atbilde ir “jūs varat”, taču slikta CSS atbalsta dēļ MSIE pārlūkprogrammā tās problēmas risinājums atšķirsies no risinājuma citām izplatītākajām pārlūkprogrammām.
Kā piemēru apsveriet šādu fragmentu:
Kaut kāds teksts
un mēģiniet vertikāli līdzināt tekstu bloka centram un bloka apakšējai malai.
Problēmas risinājums
"Pareizās" pārlūkprogrammas (tostarp MSIE
Lielākā daļa mūsdienu pārlūkprogrammu atbalsta CSS2.1, proti, displeja rekvizīta tabulas šūnas vērtību. Tas dod mums iespēju piespiest teksta bloku parādīties kā tabulas šūnu un, izmantojot šo iespēju, līdzināt tekstu vertikāli:
div(
displejs: tabula-šūna;
vertikāli izlīdzināt: vidū;
}
div(
displejs: tabula-šūna;
vertikāli izlīdzināt: apakšā;
}
Internet Explorer (līdz 7. versijai)
Problēmu par teksta pielīdzināšanu bloka apakšējai malai MSIE var atrisināt, izmantojot absolūto pozicionēšanu (šeit mums būs nepieciešams blokā iegults virknes elements):
div(
pozīcija: relatīvs;
}
div span (
displejs: bloks;
pozīcija: absolūta;
apakšā: 0%;
pa kreisi: 0%;
platums: 100%;
}
Šis noteikumu kopums darbojas arī “pareizajās” pārlūkprogrammās.
Norādiet rekvizītus
Div span (
displejs: bloks;
platums: 100%;
}
nav nepieciešams, bet tie var būt nepieciešami, ja papildus vertikālajai teksta līdzināšanai plānojat izmantot arī horizontālo līdzinājumu, piemēram, teksta līdzināšana: centrs ;.
Lai tekstu vertikāli izlīdzinātu bloka centrā, sākotnējam fragmentam joprojām būs jābūt sarežģītam - mēs ieviesīsim vēl vienu rindas elementu:
Materiāls pētīšanai:
- Vertikālā centrēšana CSS (www.jakpsatweb.cz/css/css-vertical-center-solution.html)
- Vertikālā centrēšana, izmantojot CSS (www.student.oulu.fi/%7Elaurirai/www/css/middle/)
- Vertikālā līdzināšana (www.cssplay.co.uk/ie/valign.html)
- vertical-align:middle (cssing.org.ua/2005/07/14/vertical-align-middle/)
- Vēl viena vertikālās izlīdzināšanas metode CSS (cssing.org.ua/2007/04/26/another-css-valign-method)
Vlads Merževičs
Sakarā ar to, ka tabulas šūnu saturu var vienlaikus izlīdzināt horizontāli un vertikāli, tiek paplašinātas iespējas kontrolēt elementu novietojumu vienam pret otru. Tabulas ļauj iestatīt attēlu, teksta, veidlapu lauku un citu elementu izlīdzināšanu attiecībā pret otru un tīmekļa lapu kopumā. Kopumā izlīdzināšana galvenokārt ir nepieciešama, lai izveidotu vizuālus savienojumus starp dažādiem elementiem, kā arī tos grupētu kopā.
Vertikālā centrēšana
Viens veids, kā parādīt apmeklētājam vietnes fokusu un nosaukumu, ir izmantot uzplaiksnījumu lapu. Šī ir pirmā lapa, kurā parasti ir zibatmiņas ekrāns vai attēls, kas izsaka vietnes galveno ideju. Attēls ir arī saite uz citām vietnes sadaļām. Šis attēls ir jāievieto pārlūkprogrammas loga centrā neatkarīgi no monitora izšķirtspējas. Šim nolūkam varat izmantot tabulu ar platumu un augstumu 100% (1. piemērs).
1. piemērs. Zīmējuma centrēšana
|
Šajā piemērā horizontālā līdzināšana ir iestatīta, izmantojot taga parametru align="center".
Lai iestatītu galda augstumu uz 100%, jums ir jānoņem, kods vairs nav derīgs.
Izmantojot platumu un augstumu, lai aptvertu visu pieejamo tīmekļa lapas apgabalu, tiek nodrošināts, ka tabulas saturs tiks precīzi līdzināts pārlūkprogrammas loga centrā neatkarīgi no tā lieluma.
Horizontālā izlīdzināšana
Apvienojot taga līdzināšanas (horizontālā izlīdzināšana) un nelīdzinājuma (vertikālā izlīdzināšana) atribūtus
Apskatīsim dažus teksta līdzināšanas piemērus saskaņā ar zemāk redzamo attēlu.
Augšējā līdzināšana
Lai norādītu tagam šūnu satura augšējo līdzinājumu
2. piemērs: valign izmantošana
| 1. aile | 2. sleja |
Šajā piemērā šūnu raksturlielumi tiek kontrolēti, izmantojot tagu parametrus
3. piemērs: stilu pielietošana līdzināšanai
| 1. aile | 2. sleja |
Lai saīsinātu kodu, šajā piemērā tiek izmantota atlasītāju grupēšana, jo vertikālās līdzināšanas un polsterēšanas rekvizīti tiek lietoti divām šūnām vienlaikus.
Apakšējā izlīdzināšana tiek veikta tādā pašā veidā, bet augšējās vērtības vietā tiek izmantota apakšējā vērtība.
Izlīdzināšana centrā
Pēc noklusējuma šūnu saturs ir līdzināts to vertikālās līnijas centram, tādēļ, ja kolonnām ir atšķirīgs augstums, jums ir jāiestata līdzinājums līdz augšējai malai. Dažreiz joprojām ir jāatstāj sākotnējā izlīdzināšanas metode, piemēram, ievietojot formulas, kā parādīts attēlā. 2.
Šajā gadījumā formula atrodas stingri pārlūkprogrammas loga centrā, un tās numurs atrodas labajā malā. Lai šādā veidā sakārtotu elementus, jums būs nepieciešama tabula ar trim šūnām. Ārējām šūnām jābūt vienādiem izmēriem, vidējā šūnā izlīdzinājums ir centrēts, bet labajā šūnā - gar labo malu (4. piemērs). Šis šūnu skaits ir nepieciešams, lai nodrošinātu, ka formula ir novietota centrā.
4. piemērs: Formulas izlīdzināšana
 |
(18.6) |
Šajā piemērā tabulas pirmā šūna ir atstāta tukša, tā kalpo tikai atkāpes izveidošanai, kuru, starp citu, var iestatīt arī, izmantojot stilus.
Veidlapas elementu līdzināšana
Izmantojot tabulas, ir ērti noteikt veidlapas lauku novietojumu, it īpaši, ja tie ir mijas ar tekstu. Viena no veidlapas noformējuma iespējām, kas paredzēta komentāra ievadīšanai, ir parādīta att. 3.
Lai nodrošinātu, ka teksts blakus veidlapas laukiem ir līdzināts pa labi un paši veidlapas elementi ir līdzināti pa kreisi, jums būs nepieciešama tabula ar neredzamu apmali un divām kolonnām. Kreisajā kolonnā būs pats teksts, bet labajā kolonnā būs teksta lauki (5. piemērs).
5. piemērs. Veidlapas lauku līdzināšana
Šajā piemērā tām šūnām, kurās ir nepieciešams līdzinājums pa labi, tiek pievienots atribūts align="right". Lai nodrošinātu, ka komentāra iezīme ir novietota vairāku rindiņu teksta augšdaļā, atbilstošā šūna ir iestatīta uz augšu, izmantojot atribūtu valign.
