Gesentreer: CSS-uitleg

Wanneer die uitleg van die bladsy is dikwels nodig om 'n gesentreerde CSS-plek te maak: byvoorbeeld, om die hoofeenheid sentrum. Daar is verskeie oplossings vir hierdie probleem, wat elkeen sal vroeër of later moet enige kodeerder gebruik.

Belyn teks aan die sentrum

Dikwels vir dekoratiewe doeleindes wat jy wil die teks gesentreer, CSS in hierdie geval stel, om die tyd van oplegging verminder. Voorheen dit gedoen met behulp van HTML-eienskappe, maar nou is die standaard wat nodig is om die teks met die stylblad in lyn te bring. In teenstelling met die blok waarvoor jy die eksterne padding in CSS belyning van die teks in die middel is gemaak met 'n enkele lyn te verander:

• text-align: center;

Hierdie eiendom geërf en oorgegaan het uit die ouer vir alle kinders. Dit raak nie net die teks nie, maar ook om ander elemente. Vir hierdie doel, moet hulle kleinletters (bv span) of ry-blok (enige blokke wat vertoon eiendom spesifiseer: blok). Laasgenoemde opsie kan jy ook die hoogte en breedte van die element, meer buigsame opset van die inkeping verander.

bladsye in lyn te bring dikwels kenmerk homself die tag. Dit maak onmiddellik die kode ongeldig, aangesien W3C erken align kenmerk uitgedien. Deur dit te gebruik op 'n bladsy word nie aanbeveel.

gesentreer blok

As jy wil hê dat die aanpassing van die div in die middel stel, kan CSS nogal 'n gemaklike manier bied: die gebruik van eksterne padding marge. Padding kan gespesifiseer word as die blok elemente, en line-blok. Svoysva waarde moet wees 0 (vertikale padding), en 'n outomatiese (outomatiese inkeping horisontaal):

• marge: 0 motor;

Nou hierdie opsie word erken as absoluut geldig. Die gebruik van eksterne padding laat jou ook toe om die aanpassing van die sentrum stel: CSS-marge eiendom stel ons in staat om baie probleme wat verband hou met die plasing element op die bladsy op te los.

Aanpassing van die linker-of regter rand van die blok

Soms CSS-manier nie belyning van die sentrum vereis, maar dit is nodig om die volgende twee blokke, een van die linkerkant en die ander sit - van die reg. Want dit is daar die eiendom float, wat een van drie waardes kan neem: links, regs of geen. Kom ons sê jy het twee blokke die ander kant moet geplaas word deur kant. Dan is soos volg die kode:

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

As daar is 'n derde blok, wat onder die eerste twee blokke (bv footer) moet geleë wees, dan is dit nodig om duidelik funksie registreer:

• .left {float: left;}
• .right {float: reg}
• footer {duidelik: beide}

Die feit dat die blokke met die klasse van links en regs val uit van die totale vloei, dit wil sê alle ander elemente ignoreer die bestaan van elemente in lyn. Eiendom duidelik: beide kan footer blok of enige ander sigbare ontketen uit die vloei selle en verbied wrap (float) op beide die links en regs. Daarom, in ons voorbeeld, die voet is afwaarts verplaas.

vertikale belyning

Daar is gevalle waar nie genoeg om die belyning van die sentrum van die CSS-maniere te stel, moet jy ook die vertikale posisie van die kind blok te verander. Enige lyn of ry-blok element kan teen die boonste of onderste rand gedruk, geleë in die middel van die ouer element of in 'n arbitrêre plek. vereis meestal belyning van die sentrum van die blok, dit maak gebruik van vertikale-align kenmerk. Gestel daar is twee blokke, een geneste binne die ander. In hierdie binnenshuise eenheid - ry-blok element (display: inline-blok). Dit is nodig om die vertikale blok kind aan te pas:

• aanpassing van die boonste grens - .child {vertikale-align: top};
• gesentreer - .child {vertikale-align: middel};
• belyning van die onderste rand - .child {vertikale-align: bodem};

Op blok elemente klank text-align, of vertikale-align is nie van toepassing.

Moontlike probleme met gebonde eenhede

Soms div align die sentrum van die CSS-manier kan 'n bietjie moeilikheid veroorsaak. Byvoorbeeld, wanneer die gebruik van 'n float: byvoorbeeld, is daar drie blokke: .first, .second en .third. Die tweede en derde blokke lê in die eerste. 'N element met 'n klas tweede links belyn, en die laaste blok - aan die regterkant. Na aanpassing van die twee laat val van die stroom. As die ouer element nie gedefinieer hoogte (bv 30em), dit sal ophou om die hoogte van filiaal eenhede rek. Om hierdie fout te vermy, gebruik die "spacer" - 'n spesiale eenheid, wat sien .second en .third. CSS-kode:

• .second {float: links}
• .third {float: reg}
• .clearfix {hoogte: 0; duidelik: beide;}

pseudo dikwels gebruik: na, wat ook toelaat om die blokke in plek om terug te keer deur die skep van psevdorasporki (in die voorbeeld in die div met klas lê binne-in die houer en bestaan uit 'n .first .left en .right):

• .left {float: links}
• .right {float: reg}
• .container: na {inhoud: ''; vertoon: tafel; duidelik: beide;}

Die bogenoemde opsies - die mees algemene, maar daar is 'n paar variasies. Jy kan die maklikste en mees geskikte manier om psevdorasporki skep deur eksperimente altyd vind.

Nog 'n probleem wat dikwels teëgekom uitleg - belyning van lyn-blok elemente. Na elkeen van hulle 'n ruimte outomaties bygevoeg. Hanteer dit help om die eiendom marge, wat gedefinieer word deur die negatiewe inkeping. Daar is ander maniere, wat minder gereeld gebruik word, byvoorbeeld, herstel die lettergrootte. In hierdie geval, die eienskappe van die ouer element registreer font-size: 0. As geleë binne blokke teks, het die eienskappe van lyn-blok elemente teruggekeer na die verlangde lettergrootte. Byvoorbeeld, lettergrootte: 1em. Die metode is nie altyd gerieflik, so dit is baie meer algemeen gebruik weergawe met eksterne marges.

Aanpassing Blocks kan jy 'n pragtige en funksionele bladsye te skep: die algemene uitleg en uitleg, en die plek van goedere in die winkels, en foto's op die webwerf van 'n klein.