Keskuse pilte, teksti ja plokke elemente veebisaitide ülesehitamisel
Kui õpite veebisaitide loomist , on üks kõige tavalisemaid trikke, mida peate kapteniks tegema, kuidas keskenduda brauseri aknas olevatele üksustele. See võib tähendada lehe kujutise tsentreerimist või disaini osana võiks see olla tsentreeriv tekst nagu pealkirjad.
Kesksete piltide või teksti või isegi kogu veebisaidi visuaalse väljanägemise õige viis on Cascading Style Sheets (CSS) kasutamine . Enamik tsentreerimise omadusi on CSS-ist alates versioonist 1.0 ja nad töötavad suurepäraselt CSS3 ja kaasaegsete veebibrauseritega .
Nagu paljud veebidisaini aspektid, on veebisaidil keskne element ka CSS-i kasutamiseks mitu võimalust. Vaatame mõnda erinevat viisi CSS-i kasutamiseks selle visuaalse väljanägemise saavutamiseks.
Ülevaade CSS-i kasutamisest keskuse elementide jaoks HTML-is
CSS-i keskendumine võib olla väljakutse veebidisainerite alustamiseks, sest selle ühe visuaalse stiili saavutamiseks on nii palju erinevaid viise. Kuigi meetodite mitmekesisus võib olla tore või maitsekas veebiarendaja, kes teab, et mitte kõik tehnikad töötavad iga elemendi puhul, võib see uute veebiprofessionaalide jaoks olla hirmutav, kuna paljud meetodid tähendavad, et nad peavad teadma, millal seda lähenemist kasutada. Parim asi, mida teha, on mõne lähenemisviisi mõistmine. Kui hakkate neid kasutama, siis saate teada, milline meetod kõige paremini toimib.
Kõrgel tasemel võite kasutada CSS-i järgmisel viisil:
- Keskuse tekst
- Keskustage ploki tasemel element (nt jagunemine)
- Keskuse pilt
- Vertikaalselt keskendage plokki või pilti
Paljud (mitu) aastat tagasi võtsid veebidisainerid piltide ja teksti keskendamiseks
Tekst keskendamine CSS-i abil
Kõige lihtsam asi, mis veebilehel keskendub, on tekst. Selleks on vaja ainult ühte stiili vara, mida soovite seda teha: teksti joondamine. Võtke CSS-stiili allpool, näiteks:
p.center {text-align: center; }
Selle CSS-i rida keskpunktiga kirjutatud kõik lõiked keskenduvad oma põhielemendi horisontaalselt. Näiteks, kui lõik oli rajoonis, see tähendab, et see oli selle diviisi laps, oleks see
Siin on HTML-dokumendis rakendatud selle klassi näide:
See tekst on keskel.
Teksti tsentreerimisel teksti-joondusobjektiga pidage meeles, et see paikneb selles sisalduva elemendi keskosas ja ei pea tingimata olema kogu lehekülje sees. Samuti pidage meeles, et keskuse põhjendatud tekst võib olla raske lugeda suurte sisu plokkide jaoks, nii et kasutage seda stiili säästlikult. Pealkirjad ja väikesed tekstiplokid, näiteks artikli või mõne muu sisu teasertekst, on sageli kergesti loetavad ja peened, kui tsentreeritud, kuid suuremad tekstikastid, nagu kogu artikkel ise, oleksid keerulised tarbima, kui sisu oleks täielikult keskne põhjendatud. Pidage meeles, et veebisaidi teksti puhul on alati loetavus oluline !
CSS-i sisu blokeeringute keskendamine
Blokid on teie lehel kõik elemendid, millel on määratletud laius ja mis on moodustatud ploki taseme elemendina. Sageli luuakse need plokid HTML
div.center {
marginaal: 0 auto;
laius: 80em;
}
Selle marginaali vara CSS-i stentimine määrab ülemise ja alumise piiri väärtuseks 0, samal ajal kui vasakule ja paremale kasutatakse "automaatne". See võtab sisuliselt kõik võimalikud ruumid, mis on saadaval ja jagavad seda võrdlusakna mõlema külje vahel võrdselt, lehes elemendi tõhusalt tsentreerides.
Siin kasutatakse HTML-i:
kuid selle sees olev tekst jääb joondatud.
Niikaua kui teie blokeeril on määratud laius, siis keskendub see sisaldava elemendi sees. Selles plokis sisalduv tekst ei asu selles keskel, vaid vasakult õigustatud. Seda seetõttu, et veebibrauserites on vaikimisi tekst õigustatud. Kui soovite teksti ka tsentreeritud, võite jagunemise keskpunktiks kasutada seda meetodit kasutades varem käsitletud tekstivooge.
Kujutise keskendamine CSS-i abil
Kuigi enamus brausereid näitavad kujutisi, mis on tsentreeritud, kasutades sama tekstilise joone vara, mida paragrahvis juba otsisime, ei ole hea mõte tugineda sellele tehnikale, kuna W3C pole seda soovitanud. Kuna see pole soovitatav, on alati võimalus, et brauserite tulevased versioonid võivad selle meetodi ignoreerida.
Selle asemel, et pildi keskpunktiks teksti-joondus kasutada, peaksite selgesõnaliselt brausile teatama, et pilt on ploki tasemel element. Sel moel võite selle keskel asetada mis tahes teise plokki. Siin on CSS, et seda teha:
img.center {
kuva: plokk;
margin-left: auto;
paremale paremale: auto;
}
Ja siin on HTML, mis pildil, mida me tahaksime keskenduda:
Võite ka objekte keskenduda kasutades CSS-i (vt allpool), kuid seda lähenemist ei soovitata, kuna see lisab teie HTML-i märgistusse visuaalsed stiilid. Pidage meeles, et me tahame eraldi stiili ja struktuuri lisada CSS-stiile oma HTML-koodi kasutades sellist eraldamist ja sellisena tuleks seda võimaluse korral vältida.
Tsentreerivad elemendid vertikaalselt koos CSS-iga
Veebikonstruktsioonis on vertikaalselt objekte keskendunud, kuid CSS-i paindliku karbi kujundusmooduli vabastamisega CSS3-s on nüüd võimalus seda teha.
Vertikaalne joondamine toimib sarnaselt ülaltoodud horisontaalse joondusega. CSS-i vara on keskmise väärtusega vertikaalselt joondatud.
.vcenter {
vertikaalne joondus: keskmine;
}
Selle lähenemisviisi puuduseks on see, et mitte kõik brauserid ei toeta CSS FlexBoxi, kuigi üha rohkem läheb selle uue CSS-i paigutuse meetodi juurde! Tegelikult toetavad tänapäevased brauserid seda CSS-i stiili. See tähendab, et teie ainus probleem Flexboxiga oleks palju vanem brauseri versioon.
Kui teil on probleeme vanemate brauseritega, soovitab W3C kontekstist vertikaalselt teksti keskenduda järgmise meetodi abil:
- Asetage elemendid, mis paiknevad sisemise elemendi sees, näiteks div.
- Määrake sisaldava elemendi minimaalne kõrgus.
- Tuvastage, et elementi sisaldas tabeli lahtrisse.
- Seadke vertikaalne joondus "keskel".
Näiteks siin on CSS:
.vcenter {
min-kõrgus: 12em;
kuva: tabel-lahtrisse;
vertikaalne joondus: keskmine;
}
Ja siin on HTML:
See tekst on kastis vertikaalselt keskel.
Internet Exploreri vertikaalne tsentreerimine ja vanemad versioonid
Mõned võimalused on sundida Internet Explorerit (IE) keskenduma ja seejärel kasutama tingimuslikke kommentaare, nii et ainult IE näeb stiilid, kuid need on natuke verbaalsed ja inetu. Hea uudis on see, et Microsofti viimasel ajal langetatud otsus lükata IE vanemate versioonide toetusetaotluste toetuseta toetus, peaksid ebasobivad brauserid varsti minema, mistõttu on veebidisaineritel lihtsam kasutada kaasaegseid paigutusviise nagu CSS FlexBox, mis muudab kogu CSS-i kujunduse, mitte ainult keskendudes, on kõigile veebidisaineritele lihtsam.