fit lehel on sageli vaja muuta keskus viimine CSS-viis: näiteks keskus põhiseade.On mitmeid lahendusi sellele probleemile, millest igaüks on varem või hiljem kasutada mis tahes foto.
Teksti joondamine keskele
sageli kaunistamiseks soovite seada teksti viimist keskus, CSS sel juhul väheneb aja kehtestamine.Varem kasutati sel HTML-atribuudid, nüüd standard nõuab viies teksti kasutades CSS.Erinevalt plokk, mille soovite muuta välimine marginaale, CSS teksti joondamine keskele on tehtud ühe rea:
- text-align: center;
See omadus on pärilik ja edasi vanematelt kõik lapsed.See mõjutab mitte ainult teksti, vaid ka teisi elemente.Selleks peavad nad olema väiketähtedega (näiteks span) või line-block (ükskõik plokid, mis seab kinnisvara kuva: block).Viimane võimalus ka saate muuta laiuse ja kõrguse paindlikum konfiguratsiooni taandus.
Sageli lehekülgi viia atribuut tag ise.See tähendab koheselt kood kehtetuks W3C tunnistanud align atribuut vananenud.Selle kasutamine ei ole soovitatav lehel.
joondusplokk keskmes
Kui soovite täpsustada viimist keskel div, CSS võib pakkuda üsna lihtne: kasutada väliseid taandus marginaal.Täidis võib seada block-tasandi elemente ja line-block.Svoysva väärtust tuleb seada 0 (liigestatud vertikaalne) ja auto (automaatne horisontaalne taane):
- margin: 0 auto;
Nüüd see võimalus on tunnistatud täiesti kehtiv.Välise polster ka saate määrata viimist keskus: CSS-margin vara annab meile võimaluse lahendada mitmeid probleeme, mis on seotud positsioneerimine element lehel.
Align ploki vasakul või paremal serval
Mõnikord keskuse viimine CSS-viis ei ole vaja, kuid on vaja panna kaks ühikut kõrval üks vasakul ja teine - paremalt.Selle vara on float, mis võib võtta ühe kolmest väärtusest: vasakule, paremale, või keegi.Oletame, et teil on kaks üksust, mis tuleb kokku panna.Siis kood on:
- .left {float: left;}
- .right {float: õige}
Kui on kolmanda üksuse, mis tuleb paigutada esimese kahe kvartali (nt jalus), tasiis peate end registreerima vara selge:
- .left {float: left;}
- .right {float: õige}
- jalus {selge:}
asjaolu, et plokid klassid vasakule ja paremale kukkuda kokkuvoolu, mis tähendab, et kõik muud elemendid ignoreeris tunnuste olemasolu kohta viidud.Kinnistu selge: nii lubab jalus või muu üksus, et näha langes voolu elementide ja keelab wrap (float) nii vasakule ja paremale.Seega, meie näites, jalus nihkub allapoole.
vertikaalses paigutuses
On juhtumeid, kus ebapiisav hulk keskus viimine CSS-viise, peate veel muutuda vertikaalasendis lapse blokeerida.Iga line või line-block element saab surutud vastu ülemist või alumist serva, mis asub keset vanem element, või olla mis tahes paigas.Sagedamini nõuavad viimist kasti keskele, seda omadust kasutatakse vertikaalseid-align.Oletame, et on kaks ühikut, ühe sees teise.Sisemine unit - line-block element (kuva: inline-block).On vaja joondada vertikaalselt laps:
- kooskõlastamine ülempiiri - .child {vertikaalne-align: top};
- keskus viimine - .child {vertikaalne-align: keskel};
- viimine madalamas otsas - .child {vertikaalne-align: alumine};
ploki taseme elemendid või text-align või vertikaalne-align kehti.
Võimalikud probleemid reastatud üksused
Mõnikord div joonda CSS-viis võib põhjustada väiksemaid probleeme.Näiteks, kasutades float: näiteks on kolm rühma: .Esiteks, .second ja .third.Teine ja kolmas plokid on esimeses.Element koos klassi teine vasakule joondatud, ja viimase ploki - paremale.Pärast viia kahe kukkus oja.Kui vanem ei ole määratletud kõrgus (nt 30em), siis ei ole enam venitada kõrgus allasutuste.Et vältida seda viga, kasutage "spacer" - eriüksus, mis näeb .second ja .third.CSS-kood:
- .second {float: vasakul}
- .third {float: õige}
- .clearfix {kõrgus: 0;selge: nii;}
kasutatakse sageli pseudo: pärast, mis võimaldab teil naasta plokid paika, luues psevdorasporki (selles näites on div klassiga konteinerisse mahub .Esiteks ja sisaldab .left ja .right):
- .vasakule {float: vasakul}
- .right {float: õige}
- .container: pärast {sisu: '';kuva: tabel;selge: nii;}
eespool võimalusi - kõige levinum, kuigi seal on mõned variatsioonid.Teil on alati võimalik leida lihtsaim ja mugavaim viis luua psevdorasporki eksperimentidega.
Teine probleem sagedamini layout - viimist line-block elemente.Pärast iga neist lisatakse automaatselt ruumi.Et tulla toime selle kinnisvara abi marginaal, mis on määratletud negatiivne taandus.On ka teisi meetodeid, mida kasutatakse harvemini, näiteks ennistamist fondi suurust.Sel juhul omadused vanem ettenähtud font-size: 0.Kui paiknevad plokid teksti, omadusi line-block elemendid on naasnud soovitud suurus.Näiteks font-size: 1em.Meetod ei ole alati mugav, nii palju sagedamini kasutatakse võimalust väliste marginaale.
joondusplokk võimaldab teil luua ilus ja funktsionaalne lehekülje paigutuse ja see on üldine paigutus ja asukoht kaupade kauplustes ning fotod väike kodulehel.
