Canolbwyntio ar: CSS-cynllun

Pan fydd y cynllun y dudalen yn aml mae angen i wneud canolbwyntio CSS-ffordd: er enghraifft, i ganolfan y brif uned. Mae yna nifer o atebion i'r broblem hon, bydd pob un ohonynt yn hwyr neu'n hwyrach i ddefnyddio unrhyw godiwr.

Alinio testun i ganolfan

Aml at ddibenion addurniadol ydych am osod y testun ganolog, CSS yn yr achos hwn, i leihau'r amser y gosod. Yn flaenorol gwnaed hyn trwy ddefnyddio HTML-priodoleddau, ond erbyn hyn y safon ofynnol i alinio'r testun gyda'r dalen arddull. Yn wahanol i'r bloc yr ydych am newid y padin allanol CSS alinio testun yn y canol yn cael ei wneud gydag un llinell:

• testun-alinio: ganolfan;

Mae'r eiddo wedi ei etifeddu a'i drosglwyddo o riant i bob plentyn. Mae'n effeithio nid yn unig ar y testun ond hefyd i elfennau eraill. At y diben hwn, dylid eu llythrennau bach (ee, rhychwant) neu res-bloc (unrhyw blociau sy'n nodi eiddo arddangos: bloc). Y dewis olaf hefyd yn eich galluogi i newid y lled ac uchder yr elfen, cyfluniad mwy hyblyg o'r bant.

tudalennau yn aml yn cyd-fynd priodoledd iddo ei hun y tag. Mae hyn ar unwaith yn gwneud y cod annilys, gan W3C cydnabod priodoledd alinio darfod. Nid yw defnyddio ar dudalen argymhellir.

bloc sy'n Canolbwyntio ar

Os ydych am osod y aliniad y div yn y canol, gall CSS cynnig cryn ffordd cyfforddus: y defnydd o ymyl padin allanol. Gellir Padio yn cael ei nodi fel elfennau bloc, a llinell-bloc. Dylai gwerth Svoysva fod yn 0 (padin fertigol), a auto (bant awtomatig yn llorweddol):

• ymyl: 0 auto;

Yn awr yr opsiwn hwn yn cael ei gydnabod fel hollol ddilys. Gan ddefnyddio padin allanol hefyd yn eich galluogi i osod y aliniad y ganolfan: eiddo CSS-elw yn ein galluogi i ddatrys llawer o broblemau sy'n gysylltiedig â'r elfen lleoli ar y dudalen.

Aliniad o ymyl chwith neu dde o'r bloc

Weithiau nid yw CSS-ffordd oes angen aliniad y ganolfan, ond mae angen rhoi'r ddau floc nesaf, un o'r ochr chwith a'r llall - o'r dde. Ar gyfer hyn, mae eiddo arnofio, a all gymryd un o dri gwerth: chwith, i'r dde neu ddim. Dewch i ddweud eich cael dau floc y dylid eu gosod ochr yn ochr. Yna y cod fel a ganlyn:

• .left {float: chwith;}
• .right {float: dde}

Os oes trydydd bloc, y mae'n rhaid eu lleoli o dan y ddau floc cyntaf (e.e. troedyn), yna mae angen i gofrestru nodwedd glir:

• .left {float: chwith;}
• .right {float: dde}
• troedyn {glir: ddau}

Mae'r ffaith bod y blociau gyda'r dosbarthiadau o gwymp chwith a dde allan o gyfanswm y llif, hynny yw, yr holl elfennau eraill anwybyddu bodolaeth iawn o elfennau halinio. Eiddo glir: y ddau yn caniatáu bloc troedyn neu unrhyw weladwy arall waddodi o'r celloedd llif ac yn gwahardd lapio (arnofio) ar y chwith ac i'r dde. Felly, yn ein enghraifft, mae'r troedyn yn cael ei dadleoli i lawr.

aliniad fertigol

Mae yna achosion lle nad oes digon i osod y aliniad y canol y CSS-ffyrdd, rhaid i chi hefyd newid y sefyllfa fertigol y bloc plentyn. Gall unrhyw lein neu res-bloc elfen yn cael ei wasgu yn erbyn yr ymyl uchaf neu isaf, a leolir yng nghanol yr elfen rhiant neu fod mewn lleoliad mympwyol. Mae'r rhan fwyaf yn aml yn ei gwneud yn ofynnol aliniad y nghanol y bloc, mae'n defnyddio priodoledd fertigol-alinio. Tybiwch mae dau floc, un nythu o fewn y llall. Yn yr uned dan do hon - yr elfen rhes-bloc (arddangos: inline-bloc). Mae'n angenrheidiol i alinio'r plentyn bloc fertigol:

• aliniad y ffin uchaf - .child {fertigol-alinio: top};
• canolbwyntio - .child {fertigol-alinio: canol};
• aliniad ymyl isaf - .child {fertigol-alinio: gwaelod};

Ar elfennau bloc Nid yw sain testun-alinio, neu fertigol-alinio yn berthnasol.

problemau posibl gydag unedau aliniedig

Weithiau div align canol y CSS-ffordd y gall achosi ychydig o drafferth. Er enghraifft, wrth ddefnyddio fflôt: er enghraifft, mae tri bloc: .first, .second a .third. Mae'r ail a'r trydydd bloc yn gorwedd yn y cyntaf. Elfen gyda dosbarth chwith-alinio yn ail, a'r bloc olaf - ar y dde. Ar ôl alinio'r ddwy gollwng o'r nant. Os na fydd yr elfen rhiant yn cael ei ddiffinio uchder (ee, 30em), bydd yn rhoi'r gorau i ymestyn uchder unedau is-gwmni. Er mwyn osgoi gwall hwn, defnyddiwch y "spacer" - uned arbennig, sy'n yn gweld .second a .third. CSS-Cod:

• .second {arnofio: chwith}
• .third {float: dde}
• .clearfix {uchder: 0; glir: ddau;}

ffug a ddefnyddir yn aml: ar ôl, sydd hefyd yn caniatáu i ddychwelyd y blociau i'w le trwy greu psevdorasporki (yn yr enghraifft yn y div gyda dosbarth yn gorwedd y tu mewn i'r cynhwysydd ac mae'n cynnwys .left .first a .right):

• .left {float: chwith}
• .right {float: dde}
• .container: ar ôl {cynnwys: ''; arddangos: tabl; glir: ddau;}

Mae'r opsiynau uchod - y mwyaf cyffredin, er bod rhai amrywiadau. Gallwch bob amser yn dod o hyd i'r ffordd hawsaf a mwyaf cyfleus i greu psevdorasporki gan arbrofion.

Problem arall a gafwyd gosodiad aml - alinio elfennau llinell-bloc. Ar ôl pob un ohonynt lle yn cael ei ychwanegu yn awtomatig. Trin mae'n helpu eiddo ymyl, sy'n cael ei ddiffinio gan y mewnoliad negyddol. Mae ffyrdd eraill, a ddefnyddir yn llai aml, er enghraifft, ailosod maint y ffont. Yn yr achos hwn, priodweddau'r elfen rhiant yn cofrestru font-size: 0. Os lleoli o fewn blociau o destun, priodweddau elfennau llinell-bloc wedi dychwelyd i faint y ffont a ddymunir. Er enghraifft, font-size: 1em. Nid yw'r dull bob amser yn gyfleus, felly mae'n cael ei ddefnyddio yn llawer mwy cyffredin fersiwn gydag ymylon allanol.

Alinio Blociau eich galluogi i greu tudalennau hardd a swyddogaethol: y cynllun cyffredinol a gosodiad, a lleoliad o nwyddau yn y siopau, a lluniau ar safle bach.