sovi sivulla on usein tarpeen tehdä kohdistus keskustaan CSS-tapa: esimerkiksi keskustaan pääyksikön.On olemassa useita ratkaisuja tähän ongelmaan, joista kukin on ennemmin tai myöhemmin käyttää mitään koodaaja.
Kohdista teksti keskitetty
usein koristelussa haluat asettaa tekstin tasausta keskustan, CSS tässä tapauksessa, vähentää aikaa ja käyttöönoton.Aiemmin tämä tehtiin HTML-attribuutteja, nyt standardi edellyttää tekstiä tasataan tyylisivuja.Toisin lohkoon, jolle haluat muuttaa ulompi marginaalit, CSS tekstin tasauksen keskellä on tehty yhdellä rivillä:
- text-align: center;
Tämä ominaisuus on perinnöllinen ja siirtyy emoyhtiön kaikille lapsille.Se ei vaikuta ainoastaan tekstin lisäksi myös muita elementtejä.Voit tehdä tämän, ne on pienillä kirjaimilla (esimerkiksi span) tai linja-lohko (kaikki lohkot, joka asettaa ominaisuutta display: block).Jälkimmäinen vaihtoehto myös voit muuttaa leveys ja korkeus joustavampi kokoonpanon sisennys.
Usein sivut kohdistuvat määrite tag itse.Tämä heti tekee koodin virheellinen W3C myöntänyt align ominaisuus vanhentunut.Sen käyttöä ei suositella sivulla.
kohdistuspalaa keskellä
Jos haluat määrittää linjaus keskustan div, CSS voi tarjota melko helppo tapa: ulkoisten sisennys marginaali.Padding voidaan asettaa lohkoelementeille ja linja-lohko.Svoysva arvo olisi asetettava 0 (sisennetty pystysuora) ja auto (automaattinen horisontaalinen luetelmakohta):
- margin: 0 auto;
Nyt tämä vaihtoehto on tunnustettu täysin voimassa.Ulkoisten padding myös voit määrittää linjaus keskustan: CSS-marginaali omaisuuden avulla voimme ratkaista monia ongelmia, jotka liittyvät paikannus elementin sivulla.
Kohdista palkin vasempaan tai oikeaan reunaan
Joskus kohdistus keskustaan CSS-tie ei tarvita, mutta on tarpeen laittaa kaksi yksikköä vierekkäin vasemmalta ja muut - oikealta.Tämän ominaisuuden on float, joka voi olla jokin kolmesta arvosta: vasen, oikea tai ei.Sanotaan sinulla on kaksi yksikköä, jotka on koottu.Sitten koodi on:
- .left {float: left;}
- .right {float: oikea}
Jos kolmannen yksikön, joka on asetettava ensimmäisen kahden korttelin (esim, alatunnisteessa), hänsinun täytyy rekisteröityä omaisuus selvä:
- .left {float: left;}
- .right {float: oikea}
- footer {selkeä: molemmat}
että lohkojen luokat vasemmalle ja oikealle putoaa kokovirtaus, eli kaikki muut tekijät huomiotta olemassaolon elementtejä linjassa.Omaisuus selkeä: molemmat sallii alatunnisteen tai muun yksikön katso laski virtauksen elementit ja kielletään kääri (float) sekä vasemmalle ja oikealle.Siksi meidän esimerkiksi footer siirtyy alas.
pystytasossa
On tapauksia, jossa riittämätön joukko kohdistus keskustaan CSS-tapoja, sinun on silti muuttaa pystyasentoon lapsen lohkon.Mikä tahansa rivi tai linja-lohko elementti voidaan painaa vasten ylä- tai alareuna, joka sijaitsee keskellä emoelementin, tai olla missä tahansa.Useammin vaativat linjaus laatikon keskustasta määritettä käytetään vertical-align.Oletetaan on kaksi yksikköä, yksi sisällä toinen.Sisäinen yksikkö - linja-lohkon elementti (display: inline-block).On tarpeen yhdenmukaistaa yksikkö pystysuoraan lapsi:
- kohdistuksen yläraja - .child {vertical-align: top};
- keskus linjaus - .child {vertical-align: middle};
- yhdenmukaistaminen alapäässä - .child {vertical-align: pohja};
on lohkoelementeille tai text-align, tai vertical-align ei sovelleta.
mahdolliset ongelmat kohdakkain yksiköiden
Joskus div kohdistaa keskelle CSS-tie voi aiheuttaa pieniä ongelmia.Esimerkiksi käyttämällä float: esimerkiksi, on kolme lohkoa: .first, .second ja .third.Toinen ja kolmas lohkot ovat ensimmäisessä.Elementti luokan toisen vasemmalle tasattu, ja viimeinen lohko - oikealla.Kohdistettuasi kaksi putosi pois virta.Jos vanhempi ei ole määritelty korkeus (esim 30em), se ei enää venyttää korkeutta tytäryhtiön yksikköä.Voit välttää tämän virheen, käytä "spacer" - erityinen yksikkö, joka näkee .second ja .third.CSS-koodi:
- .second {float: vasemmalle}
- .third {float: oikea}
- .clearfix {korkeus: 0;selkeä: molemmat;}
usein pseudo: jälkeen, jonka avulla voit palata palikat paikalleen luomalla psevdorasporki (tässä esimerkissä div luokan kontti sijoittuu .first ja sisältää .left ja .right):
- .vasen {float: vasemmalle}
- .right {float: oikea}
- .container: jälkeen {sisältö: "";näyttö: taulukko;selkeä: molemmat;}
yläpuolella vaihtoehdoista - yleisin, joskin joitakin eroja.Voit aina löytää helpoin ja mukavin tapa luoda psevdorasporki kokeellisesti.
Toinen ongelma usein kohdanneet ulkoasu - yhdenmukaistaminen linja-lohkon elementtejä.Jokaisen niistä automaattisesti lisätilaa.Selvitäkseen tämän ominaisuuden apua marginaali, joka on määritelty negatiivinen sisennys.On muitakin menetelmiä, joita käytetään harvemmin, esimerkiksi nollata kirjasinkokoa.Tällöin ominaisuudet vanhemman määrätty font-size: 0.Jos sijaitsee korttelin tekstiä, ominaisuudet linja-lohkon elementit ovat palanneet haluttuun kokoon.Esimerkiksi, font-size: 1em.Menetelmä ei ole aina mukavaa, niin paljon useammin käytetty vaihtoehto ulkoisten marginaalit.
kohdistuspala voit luoda kauniita ja toiminnallisia asettelun ja se on yleinen ulkoasu ja sijainti tavaroiden kaupoissa, ja kuvia pieni verkkosivuilla.
