Nakasentro: CSS-Layout

Sa diha nga ang layout sa panid mao ang kanunay nga gikinahanglan aron sa paghimo sa usa ka sentro sa CSS-paagi: kay sa panig-ingnan, sa pagsentro sa mga nag-unang yunit. Adunay pipila ka mga solusyon sa problema niini, sa matag usa sa nga sa madugay o madali nga paggamit sa bisan unsa nga coder.

Abin sa teksto sa pagsentro sa

Kasagaran alang sa pangdekorasyon nga mga katuyoan nga imong gusto aron sa sa teksto nakasentro, CSS sa niini nga kaso, sa pagpakunhod sa panahon sa pagpatuman. Kaniadto kini gibuhat sa paggamit sa HTML-hiyas, apan karon ang mga sumbanan nga gikinahanglan sa pag-abin sa mga teksto sa estilo Sheet. Sukwahi sa block nga imong gusto sa pag-usab sa gawas padding sa CSS paglaray, pagtalay sa teksto diha sa tunga-tunga nga gihimo uban sa usa lang ka linya:

• text-align: center;

kabtangan Kini napanunod ug milabay gikan sa ginikanan ngadto sa tanan nga mga anak. Kini makaapekto dili lamang sa mga text apan usab sa ubang mga elemento. Tungod niini nga katuyoan, sila kinahanglan nga lowercase (pananglitan, sa gitas-on) o laray-block (sa bisan unsa nga mga bloke nga hingalan display kabtangan: block). Ang ulahing kapilian nagtugot usab kaninyo sa pag-usab sa gilapdon ug gitas-on sa mga elemento, mas flexible kontorno sa luok.

mga panid sa kasagaran abin sa hiyas sa iyang kaugalingon sa mga tag. Kini diha-diha dayon ang mga code nga walay pulos, kay W3C miila align hiyas karaan. Pinaagi sa paggamit niini sa ibabaw sa usa ka pahina nga dili girekomendar.

nakasentro block

Kon kamo gusto nga ang mga paglaray, pagtalay sa div sa tunga-tunga, CSS sa paghalad sa na sa usa ka komportable nga paagi: ang paggamit sa sa gawas padding margin. Padding mahimong bungat ingon sa mga elemento block, ug line-block. Svoysva bili kinahanglan nga 0 (bertikal padding), ug auto (automatic luok horizontally):

• margin: 0 auto;

Karon kini nga opsyon ang giila nga hingpit nga balido. Pinaagi sa paggamit sa sa gawas padding nagtugot usab kaninyo sa gibutang ang paglaray, pagtalay sa sentro: CSS-kilid kabtangan nagtugot kanato sa pagsulbad sa daghang mga problema nga nalangkit sa positioning elemento sa panid.

Paglaray, pagtalay sa wala o sa tuo nga daplin sa block

Usahay CSS-dalan wala magkinahanglan og pagsunod sa sentro, apan kini mao ang gikinahanglan aron sa pagbutang sa sa sunod nga duha ka mga bloke, ang usa gikan sa wala nga bahin ug ang uban nga mga - gikan sa too nga. Kay kini adunay sa float kabtangan, nga magakuha sa usa sa tulo ka mga mga hiyas: sa wala, sa tuo o sa wala. Ang ni-ingon kamo adunay duha ka blocks nga kinahanglan nga ibutang sa kilid sa kilid. Unya ang code mao ang sama sa mosunod:

• .Sa {float: sa wala;}
• .Sa tuo {float: tuo}

Kon adunay usa ka ikatulo nga block, nga kinahanglan nga nahimutang sa ilalum sa unang duha ka bloke (pananglitan, footer), nan kini mao ang gikinahanglan nga magparehistro tin-aw nga bahin:

• .Sa {float: sa wala;}
• .Sa tuo {float: tuo}
• footer {tin-aw: ang duha}

Ang kamatuoran nga ang mga bloke uban sa mga klase sa wala ug tuo nga pagkapukan gikan sa kinatibuk-ang dagan, nga mao, ang tanan nga uban pang mga elemento panumbalinga sa mga kaayo nga paglungtad sa mga elemento ilaray. Property tin-aw: ang duha nagtugot footer block o sa bisan unsa nga lain nga mga makita precipitated gikan sa mga selula sa dagan ug nagdili wrap (float) sa duha sa wala ug sa tuo. Busa, sa atong panig-ingnan, ang footer ang displaced sa ubos.

bertikal paglaray, pagtalay

Adunay mga kaso nga diin dili igo sa gibutang ang paglaray, pagtalay sa sentro sa CSS-dalan, kinahanglan kamo usab-usab sa mga bertikal nga posisyon sa bata block. Sa bisan unsa nga linya o sa laray-block nga elemento mahimong napugos batok sa ibabaw nga o ubos nga ngilit, nga nahimutang sa tunga-tunga sa mga ginikanan nga elemento o sa usa ka arbitraryong lokasyon. Labing sa kanunay nagkinahanglan paglaray, pagtalay sa sentro sa block, kini naggamit bertikal-align hiyas. Pananglit adunay duha ka bloke, ang usa nagsalag sa sulod sa uban nga mga. Sa niini nga sulud yunit - laray-block elemento (display: inline-block). Kini mao ang gikinahanglan sa pag-abin sa mga bertikal block bata:

• paglaray, pagtalay sa ibabaw nga utlanan - .child {bertikal-align: top};
• nakasentro - .child {bertikal-align: tunga};
• paglaray, pagtalay sa ubos nga ngilit - .child {bertikal-align: ubos};

Sa block elemento audio teksto-align, o bertikal-align dili paggamit.

Posible nga mga problema uban sa ilaray mga yunit

Usahay div abin sa mga sentro sa CSS-paagi nga hinungdan sa usa ka gamay nga kagul-anan. Pananglitan, sa dihang ang paggamit sa usa ka float: kay sa panig-ingnan, adunay tulo ka mga bloke: .una, .Ikaduha ug .Ikatulo. Ang ikaduha ug ikatulo nga mga bloke mohigda sa unang. Usa ka elemento sa usa ka klase sa ikaduha sa wala-ilaray, ug sa katapusan nga block - sa too nga. Human sa aligning sa duha ka naghulog gikan sa sapa. Kon ang mga ginikanan nga elemento dili gihubit gitas-on (pananglitan, 30em), kini mohunong sa oron sa gitas-on sa mga yunit subsidiyaryo. Aron sa paglikay sa niini nga sayop, sa paggamit sa mga "spacer" - sa usa ka espesyal nga yunit, nga nakakita .Ikaduha ug .Ikatulo. CSS-code:

• .Ikaduha {float: wala}
• .Ikatulo {float: tuo}
• .clearfix {gitas-on: 0; tin-aw: ang duha;}

mini nga sagad gigamit: sa tapus, nga nagtugot sa pagbalik sa mga bloke sa dapit pinaagi sa pagmugna psevdorasporki (sa panig-ingnan diha sa div uban sa klase sa mga bakak sa sulod sa sudlanan ug naglangkob sa usa ka .una .Wala ug .Sa):

• .Sa {float: wala}
• .Sa tuo {float: tuo}
• .container: human sa {sulod: ''; display: lamesa; tin-aw: ang duha;}

Ang mga kapilian sa ibabaw - ang labing komon nga, bisan tuod adunay mga pipila ka mga kalainan. Ikaw mahimo sa kanunay sa pagpangita sa labing sayon ug labing sayon nga paagi sa paghimo sa psevdorasporki pinaagi sa mga eksperimento.

Laing problema kanunay nasugatan Layout - paglaray, pagtalay sa linya-block elemento. Human sa matag usa kanila usa ka luna nga awtomatikong dugang pa. Pagdumala kini makatabang sa kilid kabtangan, nga gihubit sa negatibo nga luok. Adunay uban nga mga paagi, nga gigamit dili kaayo kanunay, alang sa panig-ingnan, Reset sa gidak-on sa font. Sa kini nga kaso, ang mga kabtangan sa mga ginikanan nga elemento mga rehistro font-size: 0. Kon nahimutang sa sulod sa mga bloke sa teksto, ang mga kabtangan sa linya-block elemento mibalik ngadto sa gitinguha nga gidak-on sa font. Pananglitan, font-size: 1em. pamaagi mao ang dili kanunay sayon, mao nga kini mao ang mas labaw pa nga sagad gigamit nga bersyon sa gawas nga kilid.

Aligning Bloke nagtugot kaninyo sa paghimo og matahum nga ug functional mga panid: ang kinatibuk-ang Layout ug layout, ug ang nahimutangan sa mga butang sa mga tindahan, ug mga litrato sa dapit sa usa ka gamay nga.