Pakati pezvifananidzo, zvinyorwa, uye kudzivisa zvinhu paunenge uchivaka mawebsite
Kana uri kudzidza kuvaka mawebhusayithi , imwe yenzira dzakajairika dzaunoda kuziva ndeipi yekuisa zvinhu mukati mewindo rekushandura. Izvi zvinogona kureva centering mufananidzo pane peji, kana kuti inogona kunge iri pakati-kururamisa magwaro semusoro sezvinongoita chikamu.
Nzira yakarurama yekuita izvi kutarisa maonero emifananidzo yakawanda kana zvinyorwa kana kuti webpage yako yose iri kushandisa Cascading Style Sheets (CSS) . Zvose zvezvinhu zve centering zvave zviri muCSS kubvira purogiramu 1.0, uye dzinoshanda zvikuru neCSS3 uye mazuva ano web browser .
Kufanana nezvimwe zvinhu zvewebhu, pane nzira dzakawanda dzekushandisa CSS kuisa zvinhu mukati pewebhu yewebhu. Ngatitarisei dzimwe nzira dzakasiyana dzekushandisa CSS kuti tibudirire kutarisa kunooneka.
Pamusoro peKushandisa CSS kuCentral Elements muHTML
Kutanga neCSS kunogona kuva dambudziko kutanga web designers nekuti pane nzira dzakawanda dzakasiyana dzekuita iyi inoona maitiro. Kunyange zvazvo nzira dzakasiyana-siyana dzingave dzakanaka kana kuti dzakagadziriswa vanogadzira webhuti vanoziva kuti haisi nzira dzose dzinoshanda pazvinhu zvose, izvi zvinogona kunge zvakaoma zvikuru kune vatsva vehutachiona vatsva sezvo nzira dzakasiyana-siyana dze nzira dzinoreva kuti dzinoda kuziva nguva yekushandisa nzira ipi. Chinhu chakanakisisa chaunofanira kuita ndechokuti uwane kunzwisisa maitiro mashomanana. Sezvaunotanga kuvashandisa, uchadzidza kuti ndeipi nzira inoshanda zvakanaka pane zviitiko.
Pamusoro wepamusoro, unogona kushandisa CSS ku:
- Center text
- Itai nzvimbo ye block-level element (sekuparadzanisa)
- Pinda mufananidzo
- Icho chiri pakati nepakati pedhi kana mufananidzo
Makore akawanda (mazhinji) apfuura, web designers ingashandisa
Centering Text with CSS
Chinhu chiri nyore kuisa pa webpage pane zvinyorwa. Pane imwe chete yemaitirwo epfuma yaunofanira kuziva kuti uite izvi: mavara-align. Tora maCSS style pasi apa, somuenzaniso:
p.center {text-align: center; }
Neine mutsara weCSS, ndima yose inonyorwa nekati yekirasi yechikoro inenge ichinyanya kurongeka mukati memubereki wayo. Somuenzaniso, kana ndima yacho iri mukati mechikamu, zvinoreva kuti yaiva mwana wekuparadzana, inenge ichinyatsopinda mukati me
Heanoi muenzaniso wekirasi iyi yakashandiswa muhurukuro ye HTML:
Iyi nyaya inonyanya.
Paunenge uchitarisa magwaro ane zvinyorwa-kutarisa pfuma, yeuka kuti inenge ichinyanya mukati maro ine chinhu uye haisi iyo yakanyatsopindira mukati pejiji rose pacharo. Uyewo yeuka kuti nzvimbo-zvinyorwa zvakakodzera zvinogona kuva zvakaoma kuverenga nokuda kwezvikamu zvakakura zvehuwandu, saka shandisa chirevo ichi zvishoma. Musoro uye zvinyorwa zvinyorwa zvemashoko, sezvinonzi teaser text for an article kana zvimwe zvakagadzirwa, zvinowanzova nyore kuverenga uye zvakanakisisa kana zvakagadziriswa, asi zvikamu zvakakura zvemashoko, sezvinyorwa zvakakwana pachako, zvingava zvakaoma kudya kana zvinyorwa zvacho zvakanyatsopinda vakarurama. Yeuka, kuverenga kunogara kuchikosha kana zvasvika pamagwaro ewebhu!
Inotanha Zvinyorwa zveC Content neCSS
Zvivharo ndezvimwe zvikamu zvepaji rako rine ruzivo rwakatsanangurwa uye zvinosimbiswa sechinhu-chikamu chechikamu. Kazhinji, izvi zvinodzika zvinoshandiswa nekushandisa HTML
div.center {
marginal: 0 auto;
width: 80em;
}
Iyi CSS shorthand yemugove wepakati inogona kuisa maruva ari kumusoro nepamusoro kukosha ye 0, asi kuruboshwe uye kurudyi ingashandisa "auto." Izvi zvinotora chero nzvimbo iyo inowanikwa uye inokamura pamwe chete pakati pemakona maviri ewindo rekuona, nekubudirira kuisa pfungwa pane peji.
Pano inoshandiswa mu HTML:
asi zvinyorwa mukati maro zvakasara zvakaronganiswa.
Chero bedzi bhokisi rako rine ruzivo rwakatsanangurwa, ruchazviisa mukati mavo rine chinhu. Rugwaro rwakanyorwa mubhangi iroro harungatenderi mukati maro, asi ruchasara-rwakarurama. Iyi ibhuku rekugadzirisa rakasara-rakarurama pane zvisingasviki mumavhuraji ewebhu. Kana iwe uchida kuti rugwaro rwacho ruvepo, iwe unogona kushandisa zvinyorwa-kugadzirisa pfuma yatakanyora kare pamberi pamwe neyi nzira yekuisa hutatu.
Kutanga Zvidhori neCSS
Kunyange zvazvo dzimwe nyanzvi dzakawanda dzicharatidza mifananidzo yakagadziriswa kushandisa imwecheteyo-mamiriro ekugadzirisa zvinhu zvatatotarisa pane ndima yacho, haisi pfungwa yakanaka kuvimba netsika iyo sezvo isingarumbidzwi neW3C . Sezvo zvisingagamuchirwi, pane nguva dzose mukana wekuti vashanduri vemazuva anotevera vangasarudza kusazvidza nzira iyi.
Panzvimbo yekushandisa zvinyorwa-kurongedza kuisa mufananidzo, unofanira kufanotaura zvakajeka kushandura kuti chifananidzo chacho chinonzi block-level element. Nenzira iyi, unogona kuisa panzvimbo yako sezvaunenge uchida imwe yebhande. Heino CSS kuti izvi zviitike:
img.center {
kuratidza: block;
marginal-left: auto;
marginal-right: auto;
}
Uye heino ye HTML iyo yechiratidzo chatingadi kuva nayo:
Iwe unogonawo kuisa zvinhu zvinoshandisa mu-line CSS (ona pasi apa), asi nzira iyi haIYE yakakurudzirwa sezvo inowedzera mavara ekuona mu HTML yako markup. Yeuka, isu tinoda kuparadzanisa chimiro nekugadzirisa, saka kuwedzera CSS maitiro ku HTML code yako nekuputsa kuti kupatsanurwa uye, saizvozvowo, inofanira kudziviswa kana zvichibvira.
Kupinza Zvinhu Zvikamu Zvakatenderera neCSS
Centering zvinhu zvinhu zvakarongeka zvave zvichive zvakaoma mune web design, asi nekubudiswa kweCSS Flexible Box Layout Module muCSS3, pane imwe nzira yekuzviita.
Kurongeka kwemavara kunoshanda zvakafanana nekugadzirisa kusina kuenzaniswa kunoitwa pamusoro apa. Iko CSS pfuma inowirirana-yakaenzana nehutengo hwepakati.
.vcenter {
vertical-align: pakati;
}
Izvo zvakaderera kune nzira iyi ndeyokuti havasi vese vashandisi vanobatsigira CSS FlexBox, kunyange zvazvo vakawanda uye vakawanda vari kuuya kuzere nenzira ino itsva CSS yekugadzirisa! Ichokwadi, vese vashanduri vemazuva ano nhasi vanotsigira maitiro eCSS. Izvi zvinoreva kuti zvinetso zvako bedzi neFlexbox zvingava yakawandisa yakawanda browser version.
Kana uine nyaya nevakuru vekare, W3C inokurudzira kuti iwe unyore hurukuro zvakananga mumudziyo uchishandisa nzira inotevera:
- Itai kuti zvinhu zvive mukati mechimwe chinhu, chakadai se div.
- Isai zvishoma paurefu pamusoro pezvinhu zvine chinhu.
- Taura kuti ine chinhu chakafanana neetafura yesero.
- Ita kurongeka kwakarurama kune "pakati."
Somuenzaniso, hezvino CSS:
.vcenter {
min-urefu: 12em;
kuratidza: tafura-cell;
vertical-align: pakati;
}
Uye heinoi HTML:
Nyaya iyi inowanikwa mukati mebhokisi.
Centering Vertical uye Older Versions yeInternet Explorer
Kune dzimwe nzira dzokumanikidza Internet Explorer (IE) kuti ive pakati uye zvino shandisa mazwi ane mvumo kuitira kuti IE chete ione mitambo, asi inongova verbose uye yakaipa. Nhau dzakanaka ndeyokuti nekusarudza kweMicrosoft kwekupedzisira kuderedza rubatsiro rwemashoko ekare eIE, avo vanofambisa zvisingabatsiri vanofanira kunge vari munzira yavo nokukurumidza, zvichiita kuti zvive nyore kune web designers kushandisa nzira dzemazuva ano dzakadai seCSS FlexBox dzinoita kuti CSS yose yakagadzirwe, kwete kungotarisa, zvakanyanya nyore kune vose web designers.