Ką reikia žinoti
- Norėdami sutelkti tekstą, naudokite šį kodą („[/]“ reiškia eilučių pertrauką): .center {[/] text-align: centre; [/] }.
- Centriniai turinio blokai su šiuo kodu („[/]“ reiškia eilučių pertrauką): .centerio {[/] paraštė: automatinis; [/] plotis: 80em; [/] }.
- Norėdami sutelkti vaizdą į centrą („[/]“ reiškia eilutės pertraukimą): img.center {[/] display: block; kairė paraštė: automatinis; [/] paraštė dešinėje: automatinis; [/] }.
CSS yra geriausias būdas sutelkti elementus, tačiau pradedantiesiems interneto dizaineriams tai gali būti iššūkis, nes yra labai daug būdų tai pasiekti. Šiame straipsnyje paaiškinta, kaip CSS naudoti tekstui, teksto blokams ir vaizdams centruoti.
Teksto centravimas naudojant CSS
Norint sutelkti tekstą puslapyje, reikia žinoti tik vieną stiliaus ypatybę:
.center {
text-align: centre;
}
Naudojant šią CSS eilutę, kiekviena pastraipa, parašyta su .center klase, bus centruota horizontaliai jos pirminio elemento viduje. Pavyzdžiui, skyriuje esanti pastraipa (to skyriaus vaikas) būtų centre horizontaliai.
Štai šios klasės pavyzdys, pritaikytas HTML dokumente:
Šis tekstas sutelktas.
Centruodami tekstą su „text-align“ ypatybe, atminkite, kad jis bus sutelktas jo turinčiame elemente ir nebūtinai pačiame visame puslapyje.
Tinklalapio tekstas visada yra skaitomumas. Didelis centre pateisinamo teksto blokai gali būti sunku skaityti, todėl naudokite šį stilių saikingai. Antraštes ir mažus teksto blokus, pvz., Straipsnio anonso tekstą, paprastai lengva perskaityti, kai jie yra centre; tačiau didesnius teksto blokus, pvz., visą straipsnį, būtų sudėtinga vartoti, jei jie būtų visiškai pagrįsti.
Turinio blokų centravimas naudojant CSS
Turinio blokai sukuriami naudojant HTML.
.center {
paraštė: auto;
plotis: 80em;
}
Šis CSS sutrumpinimas paraštės ypatybei viršutinę ir apatinę paraštes nustatys į 0 vertę, o kairėje ir dešinėje - „auto“. Tai iš esmės užima bet kokią laisvą vietą ir tolygiai padalija ją tarp dviejų peržiūros lango pusių, efektyviai centruodamas elementą puslapis.
Čia jis taikomas HTML:
Visas šis blokas yra centre,bet jo viduje esantis tekstas yra sulygiuotas kairėje.
Kol jūsų blokas turi apibrėžtą plotį, jis centruos save esančio elemento viduje. Tame bloke esantis tekstas nebus jo centre, bet bus pagrįstas kairėje. Taip yra todėl, kad žiniatinklio naršyklėse tekstas yra pagrįstas kaip numatytasis. Jei norite, kad tekstas taip pat būtų centruotas, padalijimui sutelkti galite naudoti anksčiau aprašytą ypatybę „text-align“ kartu su šiuo metodu.
Vaizdų centravimas naudojant CSS
Nors daugumoje naršyklių vaizdai bus rodomi centre naudojant tą pačią teksto sulyginimo ypatybę, W3C to nerekomenduoja. Todėl visada yra tikimybė, kad būsimos naršyklių versijos gali ignoruoti šį metodą.
Užuot naudoję teksto lygiavimą vaizdui centruoti, naršyklėje turėtumėte aiškiai pasakyti, kad vaizdas yra bloko lygio elementas. Tokiu būdu galite centruoti, kaip ir bet kurį kitą bloką. Štai CSS, kad tai įvyktų:
img.center {
rodyti: blokuoti;
paraštė kairėje: automatinė;
paraštė-dešinė: automatinė;
}
Čia yra vaizdo, kurį reikia sutelkti, HTML:
Taip pat galite centruoti objektus naudodami vidinį CSS (žr. Toliau), tačiau šis metodas nerekomenduojamas, nes jis prideda vaizdinių stilių prie jūsų HTML žymėjimo. Atminkite, kad stilius ir struktūra turėtų būti atskiri; pridėjus CSS stilių į HTML, tas atskyrimas bus nutrauktas, todėl turėtumėte jo vengti, kai tik įmanoma.
Elementų centravimas vertikaliai su CSS
Objektų centravimas vertikaliai visada buvo sudėtingas kuriant tinklalapius, tačiau CSS lankstus dėžutės išdėstymo modulis CSS3 pateikia būdą tai padaryti.
Vertikalus lygiavimas veikia panašiai kaip aukščiau padengtas horizontalusis lygiavimas. CSS ypatybė yra lygi vertikaliai, tokia:
.vcenter {
vertikaliai lygiuoti: vidurys;
}
Visos šiuolaikinės naršyklės palaikyti šį CSS stilių. Jei turite problemų su senesnėmis naršyklėmis, W3C rekomenduoja tekstą vertikaliai sutelkti į konteinerį. Norėdami tai padaryti, įdėkite elementus į elementą, kuriame yra, pvz., A divir nustatykite ant jo minimalų aukštį. Paskelbkite elementą, kuriame yra lentelės, ir nustatykite vertikalų lygiavimą į „vidurys“.
Pavyzdžiui, čia yra CSS:
.vcenter {
min-aukštis: 12em;
rodyti: lentelės langelį;
vertikaliai lygiuoti: vidurys;
}
Štai HTML:
Šis tekstas yra vertikaliai centre langelyje.
Nenaudokite HTML elemento vaizdams ir tekstui centruoti; jis buvo nebenaudojamas, o šiuolaikinės interneto naršyklės jo nebepalaiko. Tai iš esmės yra atsakas į aiškų HTML5 struktūros ir stiliaus atskyrimą: HTML sukuria struktūrą, o CSS diktuoja stilių. Kadangi centravimas yra vizuali elemento charakteristika (kaip jis atrodo, o ne koks jis yra), tas stilius tvarkomas naudojant CSS, o ne HTML. Vietoj to naudokite CSS, kad jūsų puslapiai būtų tinkamai rodomi ir atitiktų šiuolaikinius standartus.
Vertikalus centravimas ir senesnės „Internet Explorer“ versijos
Galite priversti „Internet Explorer“ (IE) centruotis ir tada naudoti sąlyginius komentarus, kad tik IE matytų stilius, tačiau jie yra šiek tiek žodingi ir nepatrauklūs. 2015 m. „Microsoft“ sprendimas atsisakyti palaikymo senesnės IE versijos, tačiau tai padarys ne problema, nes IE nustos naudoti.