Láraithe: CSS-leagan

Nuair a bhíonn an leagan amach an leathanaigh minic is gá a dhéanamh ar dírithe CSS-bhealach: mar shampla, a ionad an t-aonad is mó. Tá roinnt réitigh chun an fhadhb seo, beidh gach ceann acu luath nó mall a bhaint as aon coder.

Ailínigh téacs sa lár

Go minic chun críocha maisiúil is mian leat a shocrú ar an téacs dírithe, CSS sa chás seo, chun laghdú ar an bhforchur. Roimhe raibh sé seo déanta ag baint úsáide as HTML-tréithe, ach anois an caighdeán is gá a ailíniú an téacs leis an stílbhileog. I gcodarsnacht leis an bloc a ba mhaith leat a athrú ar an stuála seachtrach i CSS ailíniú an téacs i lár déanta le líne amháin:

• téacs-ailíniú: ionad;

Tá an réadmhaoin oidhreachta agus ritheadh ó thuismitheoir do gach leanbh. Dtéann sí i gcion ní amháin ar an téacs, ach freisin le heilimintí eile. Chun na críche sin, ba chóir iad a litreacha beaga (mar shampla, réise) nó ró-bloc (aon bloic a shonrú maoin taispeáint: bloc). Ceadaíonn an rogha deiridh chomh maith leat a athrú ar an leithead agus airde an eilimint, níos cumraíocht solúbtha ar an eangú.

Leathanaigh ailíniú minic tréith dó féin an chlib. Déanann sé seo láithreach an cód neamhbhailí, ós rud é admhaigh W3C tréith ailíniú léig. Níl baint úsáide as é ar leathanach molta.

bloc lárnaithe

Más mian leat a shocrú ar an ailíniú an div i lár, is féidir CSS thairiscint go leor ar bhealach compordach: úsáid a bhaint as corrlach stuáil seachtrach. Is féidir le Stuála a shonrú mar na heilimintí bloc, agus líne-bloc. Ba chóir go mbeadh luach Svoysva a 0 (stuáil ingearach), agus uathoibríoch (eangú uathoibríoch cothrománach):

• corrlach: 0 auto;

Anois tá an rogha seo aitheanta mar go hiomlán bailí. Ag baint úsáide as stuáil seachtrach féidir leat chomh maith a shocrú ar an ailíniú an ionaid: Ceadaíonn maoin CSS-corrlach dúinn a réiteach go leor fadhbanna a bhaineann leis an ngné suite ar an leathanach.

Ailíniú ar an imeall chlé nó ceart an bhloic

Uaireanta ní CSS-slí ghá ailíniú an t-ionad, ach tá sé riachtanach a chur ar an dhá bhloc eile, ceann as an taobh clé agus an ceann eile - as an gceart. Mar sin tá an mhaoin snámhphointe, is féidir a ghlacadh ar cheann de trí luach: chlé, ar dheis nó costas ar bith. Ligean le rá go bhfuil tú dhá bhloc ba chóir a chur taobh le taobh. Ansin, is é an cód mar seo a leanas:

• .left {snámhphointe: chlé;}
• .right {snámhphointe: ceart}

Má tá an tríú bloc, a chaithfear a suite faoi an chéad dhá bhloc (m.sh., buntásc), ansin is gá gné soiléir a chlárú:

• .left {snámhphointe: chlé;}
• .right {snámhphointe: ceart}
• buntásc {soiléir: iad araon}

Ós rud é go na bloic leis na haicmí titim chlé agus ar dheis amach as an sreabhadh iomlán, is é sin, na heilimintí eile neamhaird a bheith ann an-an-eilimintí ailínithe. Maoin soiléir: iad araon ceadaíonn bloc buntásc nó aon infheicthe eile deasctha as na cealla sreabhadh agus cuireann sé cosc wrap (snámhphointe) ar thaobh na láimhe clé agus ar dheis araon. Dá bhrí sin, inár shampla, tá an buntásc díláithrithe síos.

ailíniú ingearach

Tá cásanna ann nuair nach leor a shocrú ar an ailíniú an lár an CSS-bealaí, ní mór duit a athrú freisin ar an suíomh ingearach an bhloic linbh. Is féidir aon eilimint líne nó ró-bloc bheith brúite i gcoinne an imeall uachtair nó níos ísle, atá lonnaithe i lár an eilimint tuismitheora nó a bheith i suíomh treallach. A cheangal ar minic ailíniú lár an bhloic, baineann sé úsáid tréith ingearach-ailíniú. Cuir tá dhá bhloc, ceann neadaithe laistigh de na eile. San aonad faoi dhíon - eilimint rónna bloc (taispeáint: inlíne-bloc). Is gá a chur ar chomhréim leis an leanbh bloc ingearach:

• ailíniú an teorainn uachtarach - .child {ingearach-ailíniú: top};
• lárnaithe - .child {ingearach-ailíniú: lár};
• ailíniú an imeall bun - .child {ingearach-ailíniú: bun};

Ag eilimintí bloc Ní fuaime téacs-ailíniú, nó ingearach-ailíniú i bhfeidhm.

fadhbanna is féidir le haonaid Ailínithe

Uaireanta div align lár an CSS-bhealach a chur faoi deara dtrioblóid beag. Mar shampla, nuair a úsáid a snámhphointe: mar shampla, tá trí bloic: .first, .second agus .third. An dara agus an tríú bloc bheidh sa chéad. Gné le rang an dara ailínithe ar chlé, agus an bloc seo caite - ar an gceart. I ndiaidh ailíniú thit an bheirt ón sruth. Mura bhfuil an ghné tuismitheoir atá sainithe airde (m.sh., 30em), beidh sé d'fheidhm a stráice an airde na n-aonad fochuideachta. Chun seo a sheachaint earráid, bain úsáid as an "spacer" - aonad speisialta, a fheiceann .second agus .third. CSS-cód:

• .second {snámhphointe: chlé}
• .third {snámhphointe: ceart}
• .clearfix {airde: 0; soiléir: iad araon;}

pseudo úsáidtear go minic: i ndiaidh, a chuireann ar chumas freisin a thabhairt ar ais na bloic i bhfeidhm faoi psevdorasporki chruthú (sa sampla sa div le rang luıonn laistigh den choimeádán agus cuimsíonn .left .first agus .right):

• .left {snámhphointe: chlé}
• .right {snámhphointe: ceart}
• .container: i ndiaidh {ábhar: ''; Taispeáint: tábla; soiléir: iad araon;}

Na roghanna thuas - an ceann is coitianta, cé go bhfuil roinnt athruithe. Is féidir leat teacht i gcónaí ar an bealach is éasca agus is áisiúla psevdorasporki a chruthú le turgnaimh.

Fadhb eile leagan amach a bhíonn go minic - ailíniú na n-eilimintí líne-bloc. Tar éis gach ceann acu spás leis go huathoibríoch. Láimhseáil cuidíonn sé leis an maoin corrlach, atá arna sainiú ag an eangú diúltach. Tá bealaí eile, a úsáidtear chomh minic sin, mar shampla, athshocrú an méid an chló. Sa chás seo, na hairíonna an eilimint tuismitheora chláraíonn font-size: 0. Má lonnaithe laistigh de bhloic téacs, tá na hairíonna na n-eilimintí líne-bloc ar ais chuig an méid atá ag teastáil cló. Mar shampla, font-size: 1em. Níl an modh seo i gcónaí áisiúil, mar sin tá sé in úsáid i bhfad níos coitianta a leagan le corrlaigh seachtracha.

Bloic Ailíniú féidir leat a chruthú leathanaigh álainn agus feidhmiúil: an leagan amach ginearálta agus leagan amach, agus an suíomh na n-earraí i siopaí, agus grianghraif ar an suíomh beag.