Centro vaizdus, tekstus ir bloko elementus kurdami svetaines
Jei mokate kurti svetaines , vienas iš labiausiai paplitusių gudrybių, kuriuos turėsite išmokti, yra tai, kaip naršyti langą elementus. Tai gali reikšti, kad puslapio vaizdą centruos, arba jis gali būti pagrindinis tekstas, kaip antraštės, kaip dizaino dalis.
Tinkamas būdas pasiekti šį vizualų vaizdų vaizdų ar teksto vaizdą ar net visą jūsų tinklalapį yra naudojant kaskadinių stilių lakštus (CSS) . Dauguma centrų savybių buvo CSS nuo 1.0 versijos, o jie puikiai veikia su CSS3 ir šiuolaikinėmis interneto naršyklėmis .
Kaip ir daugelis interneto dizaino aspektų, yra keletas būdų, kaip naudoti CSS centriniams elementams tinklalapyje. Pažvelkime į keletą skirtingų būdų naudoti CSS, kad pasiektumėte šį vizualų vaizdą.
Apie CSS naudojimą elementų centruose HTML
Centravimo su CSS gali būti iššūkis pradedant interneto dizainerius, nes yra tiek daug įvairių būdų, kaip atlikti šį vieną vizualų stilių. Nors metodų įvairovė gali būti gražūs arba patyrę žiniatinklio kūrėjai, kurie žino, kad ne visi metodai taikomi kiekvienam elementui, tai gali būti labai sudėtinga naujesniems žiniatinklio srities specialistams, nes daugybė metodų reiškia, kad jie turi žinoti, kada naudoti šį metodą. Geriausias dalykas yra suprasti kelis metodus. Kai pradėsite juos naudoti, sužinosite, kuris metodas geriausiai veikia.
Aukštu lygmeniu galite naudoti CSS:
- Centro tekstas
- Centro bloko lygio elementas (pvz., Padalinys)
- Centruokite vaizdą
- Vertikaliai centruokite bloką ar vaizdą
Prieš daugelį (prieš kelis) metų interneto dizaineriai gali naudoti elementą
Teksto sujungimas su CSS
Lengviausias dalykas tinklalapio centre yra tekstas. Tam reikia tik vieno stiliaus nuosavybės, kad jums reikia tai žinoti: text-align. Paimkite CSS stilius žemiau, pavyzdžiui:
p.center {text-align: center; }
Naudodamiesi šia CSS eilute, kiekviena pastraipa, parašyta centrine klase, centruojama horizontaliai viduje tėvų elemento. Pavyzdžiui, jei pastraipa buvo skyriaus viduje, o tai reiškia, kad tai buvo šio skyriaus padalinys, jis būtų centre horizontaliai
Štai šios klasės pavyzdys, taikomas HTML dokumente:
Šis tekstas yra centre.
Kai centruojame tekstą su teksto suderinimo nuosavybe, atminkite, kad jis bus sutelktas į jį sudarančio elemento vidurį ir nebūtinai bus sutelktas į visą pačią puslapį. Taip pat atminkite, kad centru pagrįstas tekstas gali būti sunkiai nuskaitomas dideliems turinio blokams, taigi šį stilių naudokite taupiai. Antraštės ir nedideli teksto blokai, pvz., Straipsnio ar kito turinio teaserio tekstas, dažnai yra lengva skaityti ir gerai, kai centre, bet didesni teksto blokai, kaip ir pats pats straipsnis, būtų sudėtinga vartoti, jei turinys būtų visiškai centre pateisinamas. Atminkite, kad skaitymo būdas visuomet yra pagrindinis, kai kalbama apie svetainės tekstą!
Centravimo blokų turinys su CSS
Blokai yra bet kokie jūsų puslapio elementai, kurių apibrėžtas plotis yra nustatytas kaip bloko lygio elementas. Dažnai šie blokai yra sukurti naudojant HTML
div.center {
marža: 0 auto;
plotis: 80em;
}
Šis "CSS" stenograma maržos nuosavybei nustatys viršutinę ir apatinę maržas iki 0 vertės, o kairėje ir dešinėje bus naudojamas "automatinis". Tai iš esmės užima bet kokią erdvę, kuri yra prieinama ir padalijama tolygiai tarp dviejų lango lango pusių, efektyviai centruojant elementą puslapyje.
Čia jis taikomas HTML:
bet tekstas viduje lieka išlygintas.
Kol jūsų blokas turi apibrėžtą plotį, jis centruos viduje esantį elementą. Šiame bloke esantis tekstas nebus sutelktas į jį, bet bus teisėtas. Taip yra dėl to, kad tekstas žiniatinklio naršyklėse nutylėjimą yra teisėtas. Jei norėtumėte, kad tekstas būtų sutelktas taip pat, galite naudoti anksčiau apibūdintą tekstą suderinamą nuosavybę kartu su šiuo metodu, kad suskirstytumėte centru.
Vaizdų centravimas naudojant CSS
Nors daugelyje naršyklių bus rodomi vaizdai, nukreipiantys tą pačią tekstą suderinančią nuosavybę, apie kurią mes jau pažvelgė pagal pastraipą, tai nėra gera idėja pasikliauti šiuo metodu, nes W3C to nerekomenduoja. Kadangi nerekomenduojama, visada yra tikimybė, kad būsimos naršyklių versijos gali nuspręsti ignoruoti šį metodą.
Vietoj to, kad centruotų vaizdą, naudodami tekstą, turėtumėte aiškiai pasakyti naršyklei, kad vaizdas yra bloko lygio elementas. Tokiu būdu galite centre tai, kaip ir bet kuris kitas blokas. Čia yra CSS, kad tai padarytumėte:
img.center {
ekranas: blokas;
margin-left: auto;
atsarginė pusė: automatinė;
}
Ir čia yra HTML, kad vaizdas, kurį norėtume centre:
Taip pat galite centre objektus naudoti in-line CSS (žr. Žemiau), tačiau šis metodas NERAMRINTO, nes jis prideda vaizdinius stilius į HTML žymėjimą. Atminkite, kad norime atskirti stilių ir struktūrą, todėl HTML kodui pridėti CSS stilių su pertrauka, atskyrimu ir kaip įmanoma, turėtų būti vengiama, kai tik įmanoma.
Centravimo elementai vertikaliai su CSS
Vertikaliai objektų centravimas visada buvo sudėtingas žiniatinklio dizaino, bet CSS lankstus dėžutės išdėstymo modulio CSS3 versijoje paleidimas dabar yra būdas tai padaryti.
Vertikalus išlygiavimas veikia panašiai kaip aukščiau aprašytas horizontalus išlyginimas. CSS nuosavybė yra vertikaliai suderinta su vidurine verte.
.vcenter {
vertikalusis išlyginimas: vidurinis;
}
Šio metodo trūkumas yra tas, kad ne visos naršyklės palaiko "CSS FlexBox", nors vis daugiau ir daugiau atsiranda dėl šio naujojo CSS išdėstymo metodo! Iš tikrųjų šiandien visos modernios naršyklės dabar palaiko šį CSS stilių. Tai reiškia, kad jūsų vienintelis susirūpinimas dėl "Flexbox" būtų daug senesnės naršyklės versijos.
Jei turite problemų su senesnėmis naršyklėmis, W3C rekomenduoja kontekste vertikaliai nukreipti tekstą naudodami šį metodą:
- Įdėkite elementus, kurie yra viduryje esančio elemento viduje, pvz., Div.
- Nustatykite minimalų aukštį elemento turinyje.
- Paskelbkite, kad elementas yra lentelės ląstelė.
- Nustatykite vertikalųjį išlygiavimą į "vidurinis".
Pavyzdžiui, čia yra CSS:
.vcenter {
min-aukštis: 12em;
ekranas: staliukas;
vertikalusis išlyginimas: vidurinis;
}
Čia yra HTML:
Šis tekstas yra vertikalioje dėžutėje.
Vertikalios centravimo ir senesnės "Internet Explorer" versijos
Yra keletas būdų priversti Internet Explorer (IE) centre ir tada naudoti sąlygines pastabas, kad tik IE matytų stilių, tačiau jie yra šmaikštus ir negraži. Geros naujienos yra tai, kad neseniai priimtame "Microsoft" sprendime panaikinti paramą senesnėms "IE" versijoms, netinkamos naršyklės turėtų greitai išsiversti, kad interneto dizaineriai galėtų lengviau naudoti šiuolaikinius išdėstymo metodus, pvz., "CSS FlexBox", kuris sukurs visą CSS išdėstymą, ne tik centruojant, bet ir visiems interneto dizaineriams.