Mida teada
- Teksti tsentreerimiseks kasutage järgmist koodi ("[/]" tähistab reavahet): .center [[/] text-align: center; [/] }.
- Järgmise koodiga sisuplokid ("[/]" tähistab reavahet): .center [[/] veeris: automaatne; [/] laius: 80em; [/] }.
- Kujutise tsentreerimiseks ("[/]" tähistab reavahet): img.center {[/] display: block; [/] vasak serv: automaatne; [/] marginaal paremal: automaatne; [/] }.
CSS on parim viis elementide tsentreerimiseks, kuid see võib olla väljakutse algajatele veebidisaineritele, kuna selle saavutamiseks on nii palju võimalusi. Selles artiklis selgitatakse, kuidas CSS-i kasutada teksti, tekstiplokkide ja piltide tsentreerimiseks.
Teksti tsentreerimine CSS-iga
Lehe teksti tsentreerimiseks peate teadma ainult ühte stiili atribuuti:
.Keskus {
teksti joondamine: keskel;
}
Selle CSS-i reaga tsentreeritakse iga klassiga .center kirjutatud lõik horisontaalselt oma vanemelemendi sisse. Näiteks jaotise sees olev lõik (selle jao laps) koonduks horisontaalselt jaotise sisse.
Siin on näide sellest klassist, mida HTML-dokumendis rakendatakse:
See tekst on keskel.
Atribuudiga text-joondamine teksti tsentreerimisel pidage meeles, et see koondub selle sisaldavas elemendis ja ei pruugi tingimata olla täislehe enda sees.
Veebisaidi teksti puhul on loetavus alati võtmetähtsusega. Suur keskel õigustatud teksti plokid võib olla raskesti loetav, seega kasutage seda stiili säästlikult. Pealkirju ja väikeseid tekstiplokke, näiteks artikli teaser-teksti, on keskelt vaadates tavaliselt lihtne lugeda; suuremate tekstiplokkide, näiteks täieliku artikli plokkide väljatoomine oleks aga keeruline, kui see on täielikult keskel õigustatud.
Sisuplokkide tsentreerimine CSS-iga
Sisuplokid luuakse HTML-i abil.
.Keskus {
veeris: auto;
laius: 80em;
}
See marginaali omaduse CSS-i lühikirjeldus määraks ülemise ja alumise veerise väärtuseks 0, vasakule ja paremale aga "auto". See võtab põhimõtteliselt kogu olemasoleva ruumi ja jagab selle ühtlaselt vaateava akna kahe külje vahel, keskendades elemendi tõhusalt lehele.
Siin rakendatakse seda HTML-is:
Kogu see plokk on tsentreeritud,kuid selle sees olev tekst on vasakule joondatud.
Niikaua kui teie plokil on määratletud laius, tsentreeritakse see end sisaldava elemendi sisse. Selles plokis sisalduvat teksti ei tsentreerita, vaid see on vasakpoolselt põhjendatud. Seda seetõttu, et tekst on veebibrauserites vaikimisi õigustatud. Kui soovite, et ka tekst oleks tsentreeritud, võiksite jaotuse tsentreerimiseks kasutada koos selle meetodiga varem käsitletud atribuuti teksti joondamine.
Piltide tsentreerimine CSS-iga
Kuigi enamikus brauserites kuvatakse pildid, mis on koondatud sama teksti joondamise atribuudiga, ei soovita W3C seda teha. Seetõttu on alati võimalus, et brauserite tulevased versioonid võivad selle meetodi eirata.
Selle asemel, et kasutada pildi tsentreerimiseks teksti joondamist, peaksite brauserile selgesõnaliselt ütlema, et pilt on plokitaseme element. Sel moel saate selle tsentreerida nagu muud plokid. Selle saavutamiseks on siin CSS:
img.center {
kuva: plokk;
marginaal vasakul: auto;
paremäär: parem;
}
Ja siin on pildi HTML-kood:
Samuti saate objekte tsentreerida, kasutades sisemist CSS-i (vt allpool), kuid seda lähenemist ei soovitata, kuna see lisab teie HTML-i märgistusele visuaalseid stiile. Pidage meeles, et stiil ja struktuur peaksid olema eraldi; CSS-stiilide lisamine HTML-ile rikub selle eraldamise ja sellisena peaksite seda võimaluse korral vältima.
Elementide tsentreerimine CSS-iga vertikaalselt
Objektide vertikaalne tsentreerimine on veebikujunduses alati olnud keeruline, kuid CSS paindlik kasti paigutuse moodul CSS3 pakub viisi seda teha.
Vertikaalne joondamine toimib sarnaselt ülalpool kaetud horisontaalse joondusega. CSS-i omadus on vertikaalselt joondatud, näiteks:
.vcenter {
vertikaalne joondus: keskmine;
}
Kõik kaasaegsed brauserid seda CSS-i stiili toetada. Kui teil on probleeme vanemate brauseritega, soovitab W3C tekst vertikaalselt mahutisse koondada. Selleks asetage elemendid sisaldava elemendi sisse, näiteks a divja määrake sellele minimaalne kõrgus. Deklareerige sisaldav element tabelirakuna ja määrake vertikaalne joondus "keskele".
Näiteks siin on CSS:
.vcenter {
min-kõrgus: 12em;
kuva: tabel-lahter;
vertikaalne joondus: keskmine;
}
Ja siin on HTML:
See tekst on kastis vertikaalselt keskel.
Ärge kasutage HTML-elementi piltide ja teksti tsentreerimiseks; see on aegunud ja tänapäevased veebibrauserid seda enam ei toeta. See on suures osas vastus HTML5 selge struktuuri ja stiili eraldamisele: HTML loob struktuuri ja CSS dikteerib stiili. Kuna tsentreerimine on elemendi visuaalne omadus (kuidas see pigem välja näeb kui milline see on), käsitletakse seda stiili CSS-i, mitte HTML-i abil. Kasutage selle asemel CSS-i, nii et teie lehed kuvatakse õigesti ja vastavad tänapäevastele standarditele.
Internet Exploreri vertikaalne tsentreerimine ja vanemad versioonid
Võite sundida Internet Explorerit (IE) tsentreerima ja seejärel kasutama tingimuslikke kommentaare, nii et ainult IE näeks stiile, kuid need on veidi sisutihedad ja ebameeldivad. Microsofti 2015. aasta otsus loobuda toest IE vanemad versioonidmuudab selle aga probleemiks, kuna IE läheb kasutusest välja.