Veebilehel olevate esemete paigutus on selle üldise disaini seisukohalt väga oluline. Kuigi on ka teisi võimalusi skeemi mõjutamiseks, nagu näiteks tabelite kasutamine ( mida me ei soovita ), on kõige parem kasutada CSS-i .
Allpool uurime, kuidas kasutada piltide, tabelite, lõikude jms joondamiseks lihtsa CSS-i stiili in-line omadust.
Märkus. Neid samu meetodeid saab kasutada ka väliste stiilide lehtedel, kuid kuna need kehtivad üksikutele esemetele ja on tõenäoliselt vaja sellisel viisil jääda, on kõige parem kasutada sisseehitatud stiili, nagu allpool mainitud.
Joondage teksti lõigud
Paragrahvi tag on esimene koht, kus oma veebilehte välja panna. See avamis- ja sulgemissildid on sellised:
Paragrahvi teksti vaikekohane joondus vastab lehe vasakule poolele, kuid võite ka parameetreid joondada paremal ja keskel.
Ujukinnisvara abil saate joondada vanema elemendi paremale või vasakule. Kõik uued elementid selle lähtekoodiga elemendis liiguvad ujutatud elemendi ümber.
Paragrahvi parima efekti saavutamiseks on kõige parem määrata lõigu laius, mis on konteineri (vanema) elemendist väiksem.
Joondage tekstisisesed lõigud
Lõppteksti jaoks on kõige huvitavam joonistus "õigustada", mis näitab brauseril teksti, mis on joondatud sisuliselt nii akna parempoolse kui ka vasakpoolse küljega.
Lõikes toodud teksti õigustamiseks kasutage teksti-joone omadust.
Te saate ka joondada teksti kogu paragrahvi paremale või vasakule (vaikimisi), kasutades teksti-joone omadust.
Teksti joondamise omadus joondab teksti elemendi sees. Tehniliselt ei tohiks see joondada lõigudesse või muusse elementi sisalduvaid pilte, kuid enamik brausereid käsitlevad pilte selle vara sisendina.
Piltide joondamine
Pildi sildi ujukinnisvara abil saab määrata piltide paigutuse lehel ja selle, kuidas tekst ümbritseb neid.
Nagu ülalpool toodud lõigud, paigutatakse piltmärgi ujukindluse omadus lehele teie pildi ja annab brauserile ülevaate selle kohta, kuidas teksti ja teisi selle pildi elemente voolata.
Eespool esitatud pildilogi järgnev tekst langeb pildi ümber paremale, kui ekraanil vasakul asuv pilt kuvatakse.
Kui ma tahan, et tekst ei lööks pildi ümber, kasutan selge vara:
Joonistamine üle punktide
Kuid mis siis, kui soovite viia rohkem kui lihtsalt lõik või pilt? Võite lihtsalt lisada stiili vara kõigisse lõigudesse, kuid seal on silt, mida saate kasutada, see on tõhusam:
Lihtsalt ümbritsege teksti ja pilte (sealhulgas HTML-märgendeid ) sildiga ja stiili vara (ujuki või tekstiväljundiga) ja kõik selle jaotisega seotud elemendid asetatakse vastavalt sellele, kuidas seda soovite.
Pidage meeles, et rajooni lõigudesse või kujutistele lisatud joondused austatakse, tühistades sildi.