Nakasentro: CSS layout

Kapag ang layout ng mga pahina ay madalas na kinakailangan upang makagawa ng isang nakasentro CSS-way: halimbawa, upang igitna ang pangunahing unit. Mayroong ilang mga solusyon sa problemang ito, ang bawat isa ay maaga o huli ay may na gamitin ang anumang tagapagkodigo.

I-align ng teksto upang igitna

Kadalasan para sa pandekorasyon layunin na gusto mong i-set ang teksto nakasentro, CSS sa kasong ito, upang mabawasan ang oras ng pagpapataw. Dati ito ay tapos na gamit ang HTML-katangian, ngunit ngayon ang mga pamantayang kinakailangan upang ihanay ang teksto sa style sheet. Sa kaibahan sa ang bloke para sa kung saan nais mong baguhin ang mga panlabas na padding sa CSS pagkakahanay ng teksto sa gitna ay ginawa na may isang solong linya:

• text-align: center;

Ang property na ito ay minana at lumipas mula sa magulang sa lahat ng mga bata. Ito ay nakakaapekto hindi lamang sa text ngunit din sa iba pang mga elemento. Para rito, dapat sila ay sa lower case (hal, span) o hilera-block (anumang mga bloke na tukuyin ang pagpapakita ng ari-arian: block). Ang nakaraang pagpipilian ay nagbibigay-daan din sa iyo upang baguhin ang lapad at taas ng elemento, mas may kakayahang umangkop configuration ng indentation.

mga pahina ay madalas na align attribute sa kanyang sarili ang tag. Ito ay agad-agad gumagawa ng code hindi wasto, dahil W3C kinikilala align attribute lipas na. Ang paggamit nito sa isang pahina ay hindi inirerekomenda.

nakasentro ang block

Kung nais mong i-set ang pagkakahanay ng div sa gitna, CSS maaaring mag-alok ng isang lubos na kumportable na paraan: ang paggamit ng mga panlabas na padding margin. Padding ay maaaring tinukoy bilang ang mga elemento bloke, at line-block. Svoysva halaga ay dapat na 0 (vertical padding), at auto (awtomatikong indentation pahalang):

• margin: 0 auto;

Ngayon ang pagpipiliang ito ay kinikilala bilang ganap na balido. Ang paggamit ng mga panlabas na padding ay nagbibigay-daan din sa iyo upang i-set ang pagkakahanay ng center: CSS-margin ng ari-arian ay nagbibigay-daan sa amin upang malutas ang maraming mga problema na kaugnay sa ang pagpoposisyon ng elemento sa pahina.

Pagkakahanay ng kaliwa o kanang gilid ng bloke

Minsan CSS-way ay hindi nangangailangan ng pag-align ng sentro, ngunit ito ay kinakailangan upang ilagay ang susunod na dalawang bloke, isa mula sa kaliwang bahagi at ang iba pang mga - mula sa kanan. Dahil dito ay may mga float na ari-arian, na maaaring tumagal ng isa sa tatlong mga halaga: kaliwa, kanan o wala. Sabihin nating mayroon kang dalawang bloke na dapat na nakalagay magkatabi. Pagkatapos ay ang code ay ang mga sumusunod:

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

Kung may isang ikatlong bloke, na kung saan ay dapat na matatagpuan sa ilalim ng unang dalawang bloke (hal, footer), pagkatapos ito ay kinakailangan upang magrehistro malinaw na tampok na ito:

• .left {float: left;}
• .right {float: right}
• footer {malinaw: parehong}

Ang katotohanan na ang mga bloke na may mga klase ng kaliwa at kanang mahulog sa labas ng kabuuang daloy, iyon ay, ang lahat ng iba pang mga elemento pinansin ang mismong pagkakaroon ng mga elemento hile-hilera. Property malinaw: parehong nagbibigay-daan sa footer bloke o anumang iba pang mga nakikitang precipitated mula sa mga cell daloy at pinagbabawal wrap (float) sa parehong kaliwa at kanan. Samakatuwid, sa aming halimbawa, ang footer ay displaced pababa.

vertical-align

May mga kaso kung saan hindi sapat upang itakda ang pagkakahanay ng gitna ng CSS-paraan, dapat mo ring baguhin ang vertical na posisyon ng bata block. Ang anumang linya o hilera-block element ay maaaring pinindot laban sa mataas o mas mababang mga gilid, na matatagpuan sa gitna ng elemento ng magulang o masumpungan sa isang arbitrary na lokasyon. Karamihan sa mga madalas nangangailangan ng pagkakahanay ng gitna ng block, ito ay gumagamit vertical-align attribute. Ipagpalagay na may dalawang blocks, isa nested sa loob ng isa. Sa ganitong indoor unit - hilera-block elemento (display: inline-block). Ito ay kinakailangan upang ihanay ang vertical block anak:

• align ng itaas na hangganan - .child {vertical-align: top};
• nakasentro - .child {vertical-align: middle};
• pagkakahanay ng sa ilalim na gilid - .child {vertical-align: bottom};

Sa block elemento audio text-align, o vertical-align ay hindi nalalapat.

Mga posibleng mga problema sa Pantayin sa mga yunit

Minsan div align sa gitna ng CSS-way ay maaaring maging sanhi ng isang maliit na problema. Halimbawa, kapag ang paggamit ng isang float: halimbawa, mayroong tatlong mga bloke: .Una, .second at .third. Ang pangalawa at pangatlong bloke hindi nagsasabi ng totoo sa unang. Ang isang elemento na may isang klase pangalawang kaliwa-hile-hilera, at ang huling bloke - sa kanan. Pagkatapos ng halayhay ang dalawang bumaba mula sa stream. Kung ang magulang elemento ay hindi natukoy taas (eg, 30em), ito ay itigil upang mabatak ang taas ng mga yunit ng subsidiary. Upang maiwasan ang error na ito, gamitin ang "spacer" - isang espesyal na yunit, na kung saan nakikita .second at .third. CSS-code:

• .second {float: left}
• .third {float: right}
• .clearfix {height: 0; malinaw: parehong;}

pseudo kadalasang ginagamit: matapos, na kung saan din ay nagbibigay-daan upang bumalik ang mga bloke sa lugar sa pamamagitan ng paglikha psevdorasporki (sa halimbawa sa div na may class na namamalagi sa loob ng lalagyan at comprises ng isang .Una .left at .right):

• .left {float: left}
• .right {float: right}
• .container: pagkatapos ng {content: ''; display: table; malinaw: parehong;}

Ang mga opsyon sa itaas - ang pinaka-karaniwang, bagaman mayroong ilang mga pagkakaiba-iba. Maaari mong palaging makita ang pinakamadaling at pinaka-maginhawang paraan upang lumikha ng psevdorasporki pamamagitan ng mga eksperimento.

Ang isa pang problema madalas nakatagpo layout - pagkakahanay ng line-block elemento. Pagkatapos ng bawat isa sa kanila ng isang puwang ay awtomatikong idinagdag. Panghawakan ito ay tumutulong sa mga margin ng ari-arian, na kung saan ay tinukoy sa pamamagitan ng mga negatibong indentation. May mga iba pang mga paraan, na kung saan ay ginagamit mas madalas, halimbawa, i-reset ang laki ng font. Sa kasong ito, ang mga katangian ng elemento ng magulang nagrerehistro font-size: 0. Kung matatagpuan sa loob ng mga bloke ng teksto, ang mga katangian ng line-block elemento ibinalik sa nais na laki ng font. Halimbawa, font-size: 1em. Ang pamamaraan ay hindi laging maginhawa, kaya ito ay mas karaniwang ginagamit na bersyon na may panlabas na mga margin.

Pagpapantay Blocks ay nagbibigay-daan sa iyo upang lumikha ng maganda at functional na mga pahina: ang pangkalahatang layout at layout, at ang lokasyon ng mga kalakal sa mga tindahan, at mga larawan sa site ng isang maliit.