Nimed

CSS: teksti vertikaalne joondamine. Divi tsentreerimine ja muud positsioneerimise peensused

Väga sageli on paigutuses vaja mõnda elementi tsentreerida horisontaalselt ja/või vertikaalselt. Seetõttu otsustasin teha artikli erinevate tsentreerimisviisidega, et kõik oleks ühes kohas käepärast.

Horisontaalse joonduse veeris: automaatne

Kui tsentreeritud elemendi laius on teada, kasutatakse veerise abil horisontaaljoondust. Töötab plokielementide jaoks:

Elem (veeris vasak: automaatne; veeris parem: automaatne; laius: 50%; )

Parema ja vasaku veerise automaatse määramine muudab need võrdseks, mis tsentreerib elemendi horisontaalselt põhiploki sees.

teksti joondamine: keskel

See meetod sobib teksti tsentreerimiseks plokis. teksti joondamine: keskel:

Joondus teksti joondamise ümbrisega (teksti joondamine: keskel; )

Olen keskel joondatud

positsioon ja negatiivne veeris vasakule

Sobib teadaoleva laiusega plokkide tsentreerimiseks. Anname emaploki asukoha: positsiooni suhtes selle suhtes, tsentreeritud elemendi asukoht: absoluutne , vasakpoolne: 50% ja negatiivne veeris vasak, mille väärtus on võrdne poole elemendi laiusega:

Joondus asukohaga .wrapper ( asukoht: suhteline; ) .wrapper p ( vasak: 50%; veeris: 0 0 0 -100 pikslit; asukoht: absoluutne; laius: 200 pikslit; )

Olen keskel joondatud

kuva: tekstisisene plokk + teksti joondamine: keskel

Meetod sobib tundmatu laiusega plokkide joondamiseks, kuid nõuab ümbrise vanemat. Näiteks saate horisontaalse menüü tsentreerida järgmiselt.

Joondus kuvaga: tekstisisene plokk + teksti joondamine: keskel; .navigation ( text-align: center; ) .navigation li (kuva: inline-block; )

Vertikaalne joondusjoone kõrgus

Saate kasutada ühe tekstirea joondamiseks samad väärtused vanemploki kõrgus ja reavahe. Sobib nuppudele, menüüelementidele jne.

line-height .wrapper (kõrgus: 100px; line-height: 100px; )

Olen vertikaalselt joondatud

positsioon ja negatiivne marginaal üles

Elementi saab vertikaalselt joondada, andes sellele fikseeritud kõrguse ja rakendades positsiooni: absoluutne ja negatiivne veeris üles. võrdne poolega joondatud elemendi kõrgus. Vanemplokile tuleb anda asukoht: suhteline:

Ümbris ( asend: suhteline; ) elem ( kõrgus: 200 pikslit; veeris: -100 pikslit 0 0; asukoht: absoluutne; ülaosa: 50%; )

Nii saate positsioneerimist ja negatiivseid veerisid kasutades elemendi lehel tsentreerida.

kuva: tabel-lahter

Vertikaalse joonduse jaoks rakendatakse elemendile atribuuti display: table-cell, mis sunnib seda tabeli lahtrit jäljendama. Samuti määrasime selle kõrguse ja vertikaalse joondamise: keskmine . Mähime selle kõik konteinerisse koos dislpay: table; property. :

Vertikaalse joonduse kuva: tabelilahter .ümbris (kuva: tabel; laius: 100%; ) .lahter (kuva: tabel-lahter; kõrgus: 100 pikslit; vertikaaljoondus: keskmine; )

Olen vertikaalselt joondatud

Elemendi dünaamiline joondamine lehel

Uurisime viise, kuidas CSS-i abil lehel elemente joondada. Nüüd vaatame jQuery juurutamist.

Ühendame jQuery lehega:

Soovitan kirjutada lihtne funktsioon elemendi tsentreerimine lehel, nimetagem seda alignCenter() . Element ise toimib funktsiooni argumendina:

Funktsioon alignCenter(elem) ( // kood siin )

Funktsiooni põhiosas arvutame dünaamiliselt ja määrame lehe keskpunkti koordinaadid CSS-i vasaku ja ülemise atribuudi jaoks:

Funktsioon alignCenter(elem) ( elem.css(( left: ($(window).width() - elem.width())) / 2 + "px", top: ($(window).height() - elem. height()) / 2 + "px" // ärge unustage lisada elemendile asukohta: absoluutne koordinaatide käivitamiseks )) )

Funktsiooni esimesel real saame dokumendi laiuse ja lahutame sellest pooleks jagatud elemendi laiuse - see on lehe horisontaalne keskpunkt. Teine rida teeb sama, ainult vertikaalse joondamise kõrgusega.

Funktsioon on valmis, jääb üle vaid lisada see DOM-i valmisolekule ja akna suuruse muutmise sündmustele:

$(function() ( // tsentreerimisfunktsiooni kutsumine, kui DOM on valmis alignCenter($(elem)); // funktsiooni kutsumine akna suuruse muutmisel $(window).resize(function() ( alignCenter($(elem) )); )) // elementide tsentreerimise funktsioon funktsioon alignCenter(elem) ( elem.css(( // vasaku ja ülemise vasaku koordinaatide arvutamine: ($(window).width() - elem.width()) / 2 + " px", ülemine: ($(aken).height() - elem.height()) / 2 + "px" )) ) ))

Flexboxi rakendus

Uued CSS3 funktsioonid, nagu Flexbox, muutuvad järk-järgult igapäevaseks. Tehnoloogia aitab luua märgistusi ilma ujukite, positsioneerimise jms kasutamata. Seda saab kasutada ka elementide tsentreerimiseks. Näiteks rakendage Flexbox põhielemendile element.wrapper ja tsentreerige sisu sees:

Ümbris ( ekraan: -webkit-box; kuva: -moz-box; ekraan: -ms-flexbox; kuva: -webkit-flex; ekraan: flex; kõrgus: 500 pikslit; laius: 500 pikslit; ) .wrapper .content ( veeris: auto; /* veeris: 0 automaatne; ainult horisontaalne */ /* veeris: auto 0; ainult vertikaalne */ ) Lorem ipsum dolor sit amet

See reegel tsentreerib elemendi samaaegselt horisontaalselt ja vertikaalselt – veeris ei tööta nüüd mitte ainult horisontaalsel, vaid ka vertikaalsel joondusel. Ja ilma teadaoleva laiuse/kõrguseta.

Seotud ressursid Aidake projekti

Ma arvan, et paljud teist, kes on pidanud küljendusega tegelema, on kohanud vajadust elemendid vertikaalselt joondada ja teavad raskusi, mis tekivad elemendi joondamisel keskele.

Jah, vertikaalseks joondamiseks on CSS-is spetsiaalne mitme väärtusega vertikaalse joondamise atribuut. Praktikas ei tööta see aga üldse ootuspäraselt. Proovime selle välja mõelda.

Võrdleme järgmisi lähenemisviise. Joonda kasutades:

lauad,
taane,
reakõrgus
venitamine,
negatiivne marginaal,
teisendada
pseudoelement
flexbox.

Illustreerimiseks vaadake järgmist näidet.

Div-elemente on kaks, millest üks on teise sees. Anname neile vastavad klassid – välimine ja sisemine.

Väljakutseks on sisemise elemendi joondamine välimise elemendi keskpunktiga.

Esiteks vaatleme juhtumit, kui välis- ja siseplokkide mõõtmed on teada. Lisame sisemine element reegel on display: inline-block , ja välimine on text-align: center ja vertical-align: middle .

Pidage meeles, et joondus kehtib ainult nende elementide puhul, millel on tekstisisene või reasisene ploki kuvarežiim.

Määrame plokkide suurused ja ka taustavärvid, et näeksime nende piire.

Välimine (laius: 200 pikslit; kõrgus: 200 pikslit; teksti joondus: keskel; vertikaaljoondus: keskmine; taustavärv: #ffc; ) .sisemine (ekraan: tekstisisene plokk; laius: 100 pikslit; kõrgus: 100 pikslit; taustavärv : #fcc;)
Pärast stiilide rakendamist näeme, et sisemine plokk on joondatud horisontaalselt, kuid mitte vertikaalselt:
http://jsfiddle.net/c1bgfffq/

Miks see juhtus? Asi on selles, et vertikaalse joondamise omadus mõjutab elemendi enda joondamist, mitte selle sisu (välja arvatud juhul, kui seda rakendatakse tabeli lahtritele). Seetõttu on selle vara rakendamine väline element ei andnud midagi. Veelgi enam, selle omaduse rakendamine sisemisele elemendile ei anna samuti midagi, kuna sisemised plokid on külgnevate plokkide suhtes vertikaalselt joondatud ja meie puhul on meil üks reasisene plokk.

Selle probleemi lahendamiseks on mitu tehnikat. Allpool vaatleme igaüks neist lähemalt.

Joondamine tabeli abil Esimene lahendus, mis meenub, on asendada välimine plokk ühe lahtri tabeliga. Sel juhul rakendatakse joondus lahtri sisule, see tähendab sisemisele plokile.

http://jsfiddle.net/c1bgfffq/1/

Ilmselge miinus see otsus– semantilisest aspektist on vale kasutada joondamiseks tabeleid. Teine puudus on see, et tabeli loomiseks peate lisama ümber veel ühe elemendi väline üksus.

Esimese miinuse saab osaliselt eemaldada, kui asendada tabeli ja td sildid div-ga ning seadistada tabeli kuvamisrežiim CSS-is.

.outer-wrapper ( kuva: tabel; ) .outer ( kuva: tabelilahter; )
Välimine plokk jääb aga ikkagi lauaks koos kõigi sellest tulenevate tagajärgedega.

Joondamine taande abil Kui sisemise ja välimise ploki kõrgused on teada, saab joonduse määrata sisemise ploki vertikaalsete taande abil valemiga: (H välimine – H sisemine) / 2.

Väline ( kõrgus: 200 pikslit; ) .sisemine (kõrgus: 100 pikslit; veeris: 50 pikslit 0; )
http://jsfiddle.net/c1bgfffq/6/

Lahenduse puuduseks on see, et see on rakendatav vaid piiratud arvul juhtudel, kui mõlema ploki kõrgused on teada.

Joondamine rea kõrgusega Kui teate, et sisemine plokk ei tohi hõivata rohkem kui ühe tekstirea, saate kasutada atribuuti line-height ja määrata see võrdseks välimise ploki kõrgusega. Kuna sisemise ploki sisu ei tohiks murduda teisele reale, on soovitatav lisada ka tühik: nowrap ja overflow: peidetud reeglid.

Väline ( kõrgus: 200 pikslit; rea kõrgus: 200 pikslit; ) .sisemine ( tühik: ilma mähiseta; ülevool: peidetud; )
http://jsfiddle.net/c1bgfffq/12/

Samuti seda tehnikat saab kasutada ka mitmerealise teksti joondamiseks, kui alistate sisemise ploki rea kõrguse väärtuse ja lisate ka kuva: inline-block ja vertikaaljoondus: keskmised reeglid.

Väline ( kõrgus: 200 pikslit; rea kõrgus: 200 pikslit; ) .sisemine ( rea kõrgus: tavaline; ekraan: inline-block; vertikaalne joondus: keskmine; )
http://jsfiddle.net/c1bgfffq/15/

Selle meetodi puuduseks on see, et välisploki kõrgus peab olema teada.

Joondamine “venitamise” abil Seda meetodit saab kasutada juhul, kui välimise ploki kõrgus on teadmata, kuid sisemise ploki kõrgus on teada.

Selleks vajate:

määrata suhteline positsioneerimine välisele plokile ja absoluutne positsioneerimine sisemisele plokile;

lisage sisemisele plokile reeglid ülemine: 0 ja alumine: 0, mille tulemusena see venib kogu välimise ploki kõrgusele;

seadke sisemise ploki vertikaalne polsterdus automaatseks.

.outer ( positsioon: suhteline; ) .inner ( kõrgus: 100 pikslit; asukoht: absoluutne; ülemine: 0; alumine: 0; veeris: auto 0; )
http://jsfiddle.net/c1bgfffq/4/

Selle tehnika idee seisneb selles, et venitatud ja absoluutselt paigutatud ploki kõrguse määramine paneb brauseri arvutama vertikaalse polsterduse võrdses vahekorras, kui see on seatud automaatseks.

Joondamine negatiivse marginaaliga ülaosaga See meetod on saanud laialdaselt tuntuks ja seda kasutatakse väga sageli. Sarnaselt eelmisele kasutatakse seda siis, kui välimise ploki kõrgus on teadmata, kuid sisemise kõrgus on teada.

Peate määrama välise ploki suhtelise positsioneerimise ja sisemise ploki absoluutse positsioneerimise. Seejärel peate nihutama sisemist plokki allapoole poole võrra välimise ploki ülaosa kõrgusest: 50% ja tõstma seda poole võrra ülespoole oma kõrgusest veeris-top: -H sisemine / 2.

Välimine ( asend: suhteline; ) .sisemine ( kõrgus: 100 pikslit; asend: absoluutne; ülemine: 50%; veeris-ülaosa: -50 pikslit; )
http://jsfiddle.net/c1bgfffq/13/

Selle meetodi puuduseks on see, et siseseadme kõrgus peab olema teada.

Joondamine teisendusega See meetod on sarnane eelmisele, kuid seda saab kasutada juhul, kui sisemise ploki kõrgus pole teada. Sel juhul saate negatiivse pikslitäidise määramise asemel kasutada atribuuti teisendus ja liigutada sisemist plokki üles, kasutades funktsiooni translateY ja väärtust -50%.

Väline ( asend: suhteline; ) .inner ( asend: absoluutne; ülemine: 50%; teisendus: translateY (-50%); )
http://jsfiddle.net/c1bgfffq/9/

Miks ei olnud eelmises meetodis võimalik väärtust protsentides määrata? Sest protsentuaalsed väärtused veerise omadused arvutatakse põhielemendi suhtes, väärtus 50% oleks pool välimise kasti kõrgusest ja meil oli vaja tõsta sisemine kast poole kõrgusele. Teisendusvara sobib selleks suurepäraselt.

Selle meetodi puuduseks on see, et seda ei saa kasutada, kui siseseadmel on absoluutne positsioneerimine.

Joondamine Flexboxiga kaasaegsel viisil vertikaalseks joondamiseks on kasutada Flexible Box Layout (üldtuntud kui Flexbox). See moodul võimaldab paindlikult juhtida elementide paigutust lehel, paigutades need peaaegu kõikjale. Flexboxi keskele joondamine on väga lihtne ülesanne.

Välimine plokk tuleb seadistada kuvama: flex ja sisemine plokk veerisele: auto . Ja ongi kõik! Ilus, kas pole?

Välimine (ekraan: painduv; laius: 200px; kõrgus: 200px; ) .sisemine (laius: 100px; veeris: automaatne; )
http://jsfiddle.net/c1bgfffq/14/

Selle meetodi puuduseks on see, et Flexboxi toetavad ainult kaasaegsed brauserid.

Millise meetodi peaksin valima? Peate alustama probleemiavaldusest:

Teksti vertikaalseks joondamiseks on parem kasutada vertikaalseid taande või atribuuti line-height.
Absoluutselt paigutatud elementide jaoks teadaolev kõrgus(näiteks ikoonid) on ideaalne meetod negatiivse marginaali ülemise atribuudiga.
Keerulisematel juhtudel, kui ploki kõrgus on teadmata, tuleb kasutada pseudoelementi või teisendusomadust.
Noh, kui teil on nii vedanud, et te ei pea IE-brauseri vanemaid versioone toetama, siis on muidugi parem kasutada Flexboxi.

Sildid: lisa sildid

Üldiselt pole HTML-i elementide lehele koondamine keeruline asi. Mõnel juhul... peavad veebiarendajad parima lahenduse leidmiseks pead murdma.

Elementide horisontaalne tsentreerimine polegi nii keeruline, vertikaalselt tekitab see juba küsimusi, kuid üldiselt võib nende kombineerimine olla ummiktee. Responsiivse disaini ajastul on meil harva teatud elementide täpsed mõõtmed selged. Ma lugesin 6 erinevatel viisidel elementide tsentreerimine CSS-i abil. Alustame sellest lihtsaid näiteid, lõpetame keerulisematega. See töötab sama HTML-koodiga:

Horisontaalne joondus teksti joondamise abil

Mõnikord on kõige lihtsam lahendus parim:

Div.center ( teksti joondus: keskel; taust: hsl(0, 100%, 97%); ) div.center img ( laius: 33%; kõrgus: automaatne; )

Siin ei ole vertikaalset tsentreerimist: selleks peate lisama veerise ülemine ja veeris-alumine omadused.

Tsentreerimine veerisega: automaatne

Teine lahendus horisontaalseks joondamiseks:

Div.center ( taust: hsl(60, 100%, 97%); ) div.center img ( ekraan: plokk; laius: 33%; kõrgus: automaatne; veeris: 0 automaatne; )

Pange tähele, et selle meetodi jaoks peate määrama atribuudi display: block.

Tsentreerimine tabelilahtri abil

Kasutades display: table-cell, saame tagada elemendi tsentreerimise nii vertikaalselt kui ka horisontaalselt. Kuid siin peame pesastama pildi teise div-elemendiga.

Keskjoondatud ( ekraan: tabel; taust: hsl(120, 100%, 97%);width: 100%; ) .center-core ( kuva: tabelilahter; teksti joondamine: keskel; vertikaaljoondus: keskel; ) .center-core img ( laius: 33%; kõrgus: automaatne; )

Et kõik õigesti töötaks, tuleb div seada laiusele: 100%. Elemendi vertikaalseks tsentreerimiseks kasutame kõrguse määramisel standardtehnikaid. Töötab kõikjal, sealhulgas IE8+.

Absoluutne joondamine

Väga huvitav lahendus. Idee seisneb selles, et peate määrama välimise konteineri kõrguse:

Absoluutselt joondatud ( asend: suhteline; min-kõrgus: 500 pikslit; taust: hsl(200, 100%, 97%); ) .absoluutselt joondatud img ( laius: 50%; min-laius: 200 pikslit; kõrgus: automaatne; ülevool : automaatne; veeris: automaatne; asend: absoluutne; ülemine: 0; vasak: 0; alumine: 0; parem: 0; )

Keskenduge tõlke abil

Uus lahendus, mis kasutab CSS-i teisendusi. Pakub nii horisontaalset kui ka vertikaalset joondust:

Keskel ( taust: hsl(180, 100%, 97%); asend: suhteline; min-kõrgus: 500 pikslit; ) .center img ( asukoht: absoluutne; ülemine: 50%; vasakul: 50%; teisendus: translate(-50) %, -50%); laius: 30%; kõrgus: automaatne; )

On mitmeid puudusi:

CSS-i teisendusvara nõuab brauseri eesliiteid
Ei tööta IE vanemates versioonides (8 ja vanemad)
Välismahutile tuleb anda kõrgus.
Kui konteineris on teksti, võib see olla veidi udune.

Tsentreerimine painduva kuvatüübi abil

Tõenäoliselt kõige lihtsam variant.

Keskel (taust: hsl(240, 100%, 97%); ekraan: painduv; õigusta sisu: keskel; joondada-üksused: keskel; ) .center img (laius: 30%; kõrgus: automaatne; )

Ei tööta kõigis IE versioonides (kuigi saate end kaitsta, kasutades lisaks kuva: tabel-lahter). Täielik CSS:

Center (taust: hsl(240, 100%, 97%); ekraan: -webkit-box; /* Safari, iOS 6 ja varasemad versioonid; Android, vana WebKit */ ekraan: -moz-box; /* Firefox (võib olla lollakas) */ kuva: -ms-flexbox; /* IE 10 */ ekraan: -webkit-flex; /* Chrome 21+ */ ekraan: flex; /* Opera 12.1+, Firefox 22+ */ -webkit-box-align: center; -moz-box-align: keskel; -ms-flex-align: keskel; -webkit-align-items: center; joonda-elemendid: keskel; -webkit-box-packi: keskus; -moz-box-pack: keskus; -ms-flex-pack: keskel; -webkit-justify-content: center; õigustama-sisu: keskpunkt; )

Tsentreerimine, kasutades arvut

Mõningatel juhtudel, seda meetodit mitmekülgsem kui flexboxi kasutamine:

Keskel ( taust: hsl (300, 100%, 97%); min-kõrgus: 600 pikslit; asukoht: suhteline; ) .center img ( laius: 40%; kõrgus: automaatne; asend: absoluutne; ülemine: arvutatud (50% - 20%); vasakul: arvutus (50% - 20%);)

See on väga lihtne, saame arvutada vajalikud mõõtmed olenevalt kogu lehe paigutusest. Arvutused on väga lihtsad, 50% on konteineri keskpunkt, kuid meie ülesanne on asetada vasak ülemine nurk Pildid. Järgmisena lahutage pool pildi kõrgusest ja laiusest. Valem on järgmine:

Ülemine: arvutus (50% - (40% / 2)); vasakule: arvutus (50% - (40% / 2));

Praktikas võite avastada, et see meetod töötab hästi, kui teame elementide mõõtmeid:

Keskmiselt (laius: 500 pikslit; kõrgus: 500 pikslit; asukoht: absoluutne; ülemine: arvutatud (50% - (300px / 2)); vasakul: arvutatud (50% - (300 pikslit - 2)); )

Seda meetodit toetab Firefox, alates versioonist 4 peate registreerima brauseri eesliited. Ei tööta IE 8-s. Täielik kood:

Keskel img (laius: 40%; kõrgus: automaatne; asend: absoluutne; üleval: -webkit-calc(50% - 20%); vasakul: -webkit-calc(50% - 20%); üleval: -moz-calc (50% - 20%); vasakul: -moz-calc(50% - 20%); üleval: arvutatud (50% - 20%); vasakul: arvutatud (50% - 20%); )

Loodan, et neist meetoditest piisab, et leida enda jaoks parim lahendus.

Lehekülje paigutusel on sageli vaja läbi viia keskjoondus CSS-meetodil: näiteks tsentreerida põhiplokk. Selle probleemi lahendamiseks on mitu võimalust, millest igaüks peab varem või hiljem kasutama iga küljendaja.

Teksti joondamine keskele

Sageli on dekoratiivsetel eesmärkidel vaja teksti joondada keskele; CSS võimaldab sel juhul vähendada paigutuse aega. Varem tehti seda HTML-i atribuutide abil, kuid nüüd nõuab standard teksti joondamist stiililehtede abil. Erinevalt plokkidest, mille veerisid tuleb muuta, toimub CSS-is teksti tsentreerimine ühe rea abil:

text-align:center;

See vara pärineb ja antakse vanemalt edasi kõigile järglastele. Mõjutab mitte ainult teksti, vaid ka muid elemente. Selleks peavad need olema inline (näiteks span) või inline-block (kõik plokid, millel on atribuut display: block). Viimane võimalus võimaldab ka elemendi laiust ja kõrgust muuta ning taandeid paindlikumalt reguleerida.

Sageli on lehtedel joondus määratud sildile endale. See muudab koodi kohe kehtetuks, kuna W3C on align atribuudi aegunud. Selle kasutamine lehel ei ole soovitatav.

Ploki joondamine keskele

Kui teil on vaja tsentreerida div, võib CSS pakkuda palju mugav viis: kasutage välimisi veerisid. Taandeid saab määrata nii plokielementidele kui ka plokisisesetele elementidele. Atribuudi väärtus peaks olema 0 (vertikaalne polsterdus) ja automaatne (automaatne horisontaalne polsterdus):

marginaal: 0 auto;

Nüüd tunnistatakse see valik täiesti kehtivaks. Välise polsterduse kasutamine võimaldab määrata ka pildi keskele: see võimaldab lahendada paljusid probleeme, mis on seotud elemendi paigutusega lehel.

Joondage plokk vasakule või paremale

Mõnikord pole CSS-i keskjoondamist vaja, kuid peate asetama kaks plokki kõrvuti: üks vasakusse serva, teine paremale. Selleks on ujuv omadus, mis võib võtta ühe kolmest väärtusest: vasak, parem või mitte. Oletame, et teil on kaks plokki, mis tuleb kõrvuti asetada. Siis on kood selline:

.left (float:left;)
.right(float:right)

Kui on ka kolmas plokk, mis peaks asuma kahe esimese ploki all (näiteks jalus), siis tuleb sellele anda selge omadus:

.left (float:left;)
.right(float:right)
jalus (selge:mõlemad)

Fakt on see, et vasak- ja parempoolsete klassidega plokid langevad üldisest voost välja, see tähendab, et kõik muud elemendid ignoreerivad joondatud elementide olemasolu. Atribuut clear:both võimaldab jalusel või mis tahes muul plokil näha voost välja kukkunud elemente ja keelab ujumise nii vasakul kui ka paremal. Seetõttu liigub meie näites jalus allapoole.

Vertikaalne joondus

Mõnikord ei piisa keskjoonduse määramisest CSS-meetoditega, vaid tuleb muuta ka alamploki vertikaalset asendit. Kõik tekstisisesed või reasisesed elemendid saab pesastada ülemisse või alumisse serva, emaelemendi keskele või mis tahes asukohta. Kõige sagedamini tuleb plokk joondada keskele, selleks kasutatakse vertikaalse joondamise atribuuti. Oletame, et seal on kaks plokki, üks on teise sees. Sel juhul on sisemine plokk inline-block element (kuva: inline-block). Peate alamploki joondama vertikaalselt:

ülemine joondus - .child(vertikaalne joondus:ülemine);
keskjoondus - .child(vertikaalne joondus:keskmine);
alumine joondus - .child(vertikaalne joondus:alumine);

Teksti joondamine ega vertikaaljoondus ei mõjuta ploki elemente.

Võimalikud probleemid joondatud plokkidega

Mõnikord võib divi tsentreerimine CSS-i abil veidi probleeme tekitada. Näiteks ujuki kasutamisel: oletame, et seal on kolm plokki: .first, .second ja .third. Teine ja kolmas plokk asuvad esimeses. Teise klassi element on vasakule joondatud ja viimane blokk- paremal. Pärast tasandamist kukkusid mõlemad voolust välja. Kui põhielemendil pole kõrgust seatud (näiteks 30 em), ei venita see enam alamplokkide kõrgusele. Selle vea vältimiseks kasutage vahetükki – spetsiaalset plokki, mis näeb .teine ja kolmas. CSS-kood:

.second(float:left)
.third(hõljumine:paremale)
.clearfix(height:0; clear: both;)

Tihti kasutatakse pseudoklassi:after, mis võimaldab ka pseudospaceri loomisega plokid oma kohale tagasi viia (näites on konteinerklassiga div inside.first ja sisaldab.left ja.right) :

.left(float:left)
.right(float:right)
.container:after(content:""; kuva:tabel; selge:mõlemad;)

Ülaltoodud valikud on kõige levinumad, kuigi variatsioone on mitu. Katsetamise teel saate alati leida kõige lihtsama ja mugavaima viisi pseudovahetüki loomiseks.

Teine probleem, millega küljenduskujundajad sageli kokku puutuvad, on plokisisese elementide joondamine. Iga nende järel lisatakse automaatselt tühik. Marginaali omadus, mis on seatud negatiivsele taandele, aitab sellega toime tulla. On ka teisi meetodeid, mida kasutatakse palju harvemini: näiteks nullimine.. Sel juhul kirjutatakse põhielemendi atribuutidesse font-size: 0. Kui plokkide sees on tekst, tagastatakse vajalik fondi suurus juba inline-block elementide atribuutides. Näiteks font-size:1em. See meetod ei ole alati mugav, seetõttu kasutatakse väliste taandega valikut palju sagedamini.

Plokkide joondamine võimaldab luua ilusaid ja funktsionaalseid lehti: see hõlmab üldise paigutuse paigutust, toodete paigutust veebipoodides ja fotosid visiitkaartide veebisaidil.

Veebisaidi lehtede paigutus ja keskele joondamine on loominguline ettevõtmine ja tekitab algajatele sageli raskusi. Nii et vaatame, kuidas seda teha. Oletame, et tahame teha järgmise struktuuriga lehe:

Meie leht koosneb neljast plokist: päis, menüü, sisu ja jalus. Lehe keskele paigutamiseks paneme need neli plokki üheks põhiplokiks:

Saidi päis

Sisu

Saidi alumine osa

Kasutades seda struktuuri näitena, kaalume mitmeid võimalusi.

Kummist saidi paigutus ja tsentreerimine

Kummist saidi paigaldamisel kasutatakse põhimõõtühikut -%, sest koht peaks ulatuma üle laiuse ja hõivama kogu vaba ruumi.

Seetõttu on "päise" ja "jaluse" plokkide laius 100% ekraani laiusest. Olgu "menüü" ploki laius 30% ja "sisu" plokk peaks asuma "menüü" ploki kõrval, st. sellel peab olema vasak veeris (margin-left), mille laius on võrdne "menüü" ploki laiusega, st. kolmkümmend%.

Et "menüü" ja "sisu" plokid kõrvuti istuksid, paneme "menüü" ploki vedelema ja lükkame selle vasakusse serva. Samuti määrame oma plokkide taustavärvid. Nüüd kirjutame selle kõik stiililehele (lehel style.css)

#header( taust: # 3e4982; laius: 100%; kõrgus: 110 pikslit; teksti joondamine: keskel; värv: # FFFFFF; fondi suurus: 24 pikslit; polsterdus: 40 pikslit; ) #menu( taust: # 6173 cb; hõljuk :left; laius: 30%; kõrgus: 300 pikslit; teksti joondamine: keskel; värv: #FFFFFF; fondi suurus: 18 pikslit; polsterdus: ülaosa: 10 pikslit; ) #content( background: #ffffff; margin-left:30% ; kõrgus: 300 pikslit; teksti joondamine: keskel; ) # jalus( taust: # 3e4982; selge: mõlemad; laius: 100%; kõrgus: 50 pikslit; teksti joondamine: keskel; värv: # FFFFFF; fondi suurus: 14 pikslit; polsterdus ülaosas: 10 pikslit;)

Klotside kõrgus määrati tinglikult nii, et tulemus oleks näha. Vaadake oma brauseris meie lehte:

Kui muudate brauseriakna suurust, muutub kõigi plokkide laius. See pole alati mugav, sest... Menüüploki venitamisel ilmub tühi ruum. Seetõttu on "menüü" ploki laius sageli fikseeritud, nii et teeme sama. Selleks asendage stiililehel vastavate atribuutide väärtused:

... #menüü( background:#6173cb; float:left; laius:200px; kõrgus:300px; ) #content( background:#ffffff; margin-left:200px; height:300px; ) ...

Nüüd venib meie leht loomulikumalt. Sujuva paigutuse korral hõivavad lehed kogu ekraani laiuse, seega pole lehtede joondamine vajalik.

Aga kui soovite, saate oma lehele ekraani vasakus ja paremas servas võrdse polsterduse. Selleks peate lisama stiili põhiplokki, mis on kõigi teiste plokkide konteiner:

Nüüd näeb meie leht välja selline:

Saidi paigutus ja tsentreerimine, fikseeritud laius

Sel juhul peame oma plokkidele määrama fikseeritud suurused:

#main( laius:800px; ) #header( background:#3e4982; laius:800px; kõrgus:150px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; ) #menu (taust:#6173cb; hõljuk:vasak; laius:200px; kõrgus:300px; teksti joondamine:tsenter; värv:#FFFFFF; fondi suurus:18px; täidis-ülaosa:10px; ) #content( background:#ffffff; margin-left: 200px; kõrgus: 300px; text-align:center; ) #footer (taust:#3e4982; selge:mõlemad; laius:800px; kõrgus:50px; teksti joondus:tsenter; värv:#FFFFFF; font- suurus: 14 pikslit; polsterdus ülaosas: 10 pikslit; )

Nüüd on meie leht vajutatud ekraani vasakusse serva.

Sel juhul saab saidi lehtede keskjoondamist teha järgmiselt. Pidagem meeles, et meie lehel on "keha" silt, millele saab anda ka laiuse ja veidi polsterdust.

Teeme nii: andke märgendile "body" laius 800 pikslit (nagu "peamine" plokk) ja vasakpoolne polsterdus 50%. Seejärel kuvatakse ekraani paremal küljel (st keskelt paremale) kogu "peamise" ploki sisu:

Selleks, et meie “peamine” plokk asuks ekraani keskel, peab selle keskosa langema kokku sildi “body” keskosaga. Need. peate nihutama "põhiplokki" poole võrra vasakule. Peamise ploki laius on 800 pikslit, mis tähendab, et peate sellele määrama atribuudi "margin-left:-400px". Jah, sellel atribuudil võivad olla negatiivsed väärtused, seejärel vähendatakse vasakut veerist (st nihutatakse vasakule). Ja see on täpselt see, mida me vajame.

Stiilileht näeb nüüd välja selline:

body( laius: 800 pikslit; padding-left: 50%; ) #main( laius: 800px; margin-left: -400px; ) #header( background: #3e4982; laius: 800px; kõrgus: 150px; teksti joondamine:keskel ; värv: #FFFFFF; fondi suurus: 24 pikslit; polsterdatud ülaosa: 40 pikslit; ) #menu( taust: # 6173 cb; hõljumine: vasak; laius: 200 pikslit; kõrgus: 300 pikslit; teksti joondamine: keskel; värv: #FFFFFF; font-size:18px; padding-top:10px; ) #content( background:#ffffff; margin-left:200px; height: 300px; text-align:center; ) #footer( background:#3e4982; clear:both; laius: 800 pikslit; kõrgus: 50 pikslit; teksti joondamine: keskel; värv: #FFFFFF; fondi suurus: 14 pikslit; täitmine ülaosas: 10 pikslit; )

Ja meie leht brauseris asub täpselt keskel:

Vaatasime saidi lehtede tsentreerimiseks kahte võimalust; tegelikult pole need dogma. Saate katsetada ja välja mõelda oma versiooni, lihtsalt kontrollige, kuidas see töötab erinevad brauserid. Kahjuks võib see, mis FireFoxis või Operas hästi kuvatakse, kuvada IE-s täiesti arusaamatult ja vastupidi. Ja me peame seda meeles pidama.

Edu teile loomingulistes otsingutes!