Keskitetty: CSS-asettelu

Kun sivun asettelua on usein tarpeen tehdä keskitetty CSS-tapa: esimerkiksi keskittää pääyksikön. Tarjolla on useita ratkaisuja tähän ongelmaan, joista jokainen ennemmin tai myöhemmin käyttää mitään koodaaja.

Kohdista teksti keskustaan

Usein koristelussa haluat määrittää tekstin keskitetty, CSS tässä tapauksessa vähentää aikaa käyttöönoton. Aikaisemmin tämä tehtiin HTML-attribuutteja, mutta nyt normin teksti saatettaisiin yhdenmukaiseksi tyylisivun. Toisin kuin lohkoon johon haluat vaihtaa ulkoisen täyte CSS yhdenmukaistaminen tekstin keskelle tehdään yhdellä rivillä:

• text-align: keskusta;

Tämä ominaisuus on perinnöllinen ja siirtyy vanhemman kaikille lapsille. Se vaikuttaa paitsi tekstiä, mutta myös muita tekijöitä. Tätä tarkoitusta varten ne olisi pieniksi (esim jänneväli) tai rivi-lohkon (kaikki lohkot, jotka määrittävät ominaisuuden display: block). Jälkimmäinen vaihtoehto voi myös muuttaa leveys ja korkeus elementti, joustavampi kokoonpanon sisennystä.

sivut usein tasata määrite itsekseen tunnisteen. Tämä saa suoraan koodin virheellinen, koska W3C myönsi align määrite vanhentunut. Käytettäessä sitä sivua ei suositella.

keskitetty lohko

Jos haluat asettaa linjaus div keskellä, CSS voi tarjota varsin mukava tapa: ulkopuolisia täyte marginaalin. Täyte voidaan määrittää lohkon elementit, ja linja-lohko. Svoysva arvo on 0 (pystysuora padding), ja automaattinen (automaattinen sisennys vaakasuunnassa):

• margin: 0 auto;

Nyt tämä vaihtoehto pidetään ehdottoman voimassa. Ulkoisten padding myös voit asettaa linjaus keskustan: CSS-margin ominaisuus antaa meille mahdollisuuden ratkaista monia ongelmia, jotka liittyvät paikoituselimessä sivulla.

Kohdistus vasemmalle tai oikealle harkon reunasta

Joskus CSS-tie ei edellytä linjaus keskustan, mutta on välttämätöntä laittaa seuraavan kahden korttelin, yksi vasemmalta ja toinen - oikealta. Tämän on float ominaisuus, joka voi ottaa yhden kolmesta arvosta: vasen, oikea tai ei mitään. Oletetaan, että on kaksi lohkoa, jotka pitäisi sijoittaa vierekkäin. Silloin koodi on seuraava:

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

Jos on kolmasosa lohko, joka on sijoitettu kahden ensimmäisen lohkot (esim. Alaviitteen), niin on välttämätöntä rekisteröidä selvä ominaisuus:

• .left {float: left;}
• .right {float: oikea}
• footer {selvä: molemmat}

Se seikka, että lohkojen luokkien vasemman ja oikean pudota koko virtaus, eli kaikki muut osat huomiotta olemassaolon elementtejä linjassa. Ominaisuus selvä: sekä mahdollistaa footer lohko tai muita näkyviä saostetaan virtauksen solujen ja kielletään wrap (float) sekä vasemmalle ja oikealle. Siksi meidän esimerkiksi footer siirtyy alaspäin.

pystykohdistus

On tapauksia, joissa ei riitä asettaa linjaus keskustan CSS-tapoja, sinun on muutettava myös pystyasentoon lapsen lohkon. Mikä tahansa linja tai rivi-lohko elementti voidaan puristaa ylä- tai alareunaan, joka sijaitsee keskellä emoelementin tai olla mielivaltaisessa paikassa. Useimmat vaativat usein kohdistuksen keskellä lohkon, se käyttää vertical-align attribuutti. Oletetaan, että on kaksi lohkoa, yksi sisäkkäin muiden. Tässä sisäyksikkö - rivi--elementin (display: inline-lohko). On tarpeen mukauttaa vertikaalilohkoa lapsi:

• kohdistus ylärajan - .child {vertical-align: top};
• keskitetty - .child {vertical-align: keskellä};
• kohdistus alareunan - .child {vertical-align: pohja};

Lohkossa elementit AV text-align, tai vertical-align ei sovelleta.

Mahdolliset ongelmat kohdistetut yksiköt

Joskus div align keskellä CSS-tie voi aiheuttaa hieman ongelmia. Esimerkiksi, kun käytetään float: esimerkiksi, on kolme lohkoa: .first, .second ja .third. Toinen ja kolmas lohkot sijaitsevat ensimmäisessä. Elementti, jossa luokan toinen vasemmalle tasattu, ja viimeinen lohko - oikealla. Jälkeen kohdistamalla kaksi putosi virrasta. Jos emoelementin ei ole määritelty korkeus (esim 30em), se ei enää venyttää korkeus tytäryhtiö yksikköä. Voit välttää tämän virheen, käytä "välike" - erityinen yksikkö, joka näkee .second ja .third. CSS-koodi:

• .second {float: vasen}
• .third {float: oikea}
• .clearfix {korkeus: 0; clear: both;}

pseudo usein: jälkeen, mikä mahdollistaa myös palauttaa lohkojen paikalleen luomalla psevdorasporki (esimerkissä div luokan sijaitsee säiliön sisällä ja käsittää .first .left ja .right):

• .left {float: vasen}
• .right {float: oikea}
• .container: jälkeen {pitoisuus: ''; näyttö: taulukko; clear: both;}

Yllä olevat optiot - yleisin, vaikka joitakin muunnelmia. Voit aina löytää helpoin ja mukavin tapa luoda psevdorasporki kokeiden.

Toinen usein kohdattu ongelma layout - kohdistus line-lohkon osia. Jälkeen kukin niistä tila on automaattisesti. Käsittele se auttaa margin ominaisuus, joka on määritelty negatiivinen sisennys. On muitakin tapoja, joita käytetään harvemmin, esimerkiksi muuttaa fontin kokoa. Tässä tapauksessa, ominaisuudet emoelementin rekisteröi fontti-koko: 0. Jos ne sijaitsevat lohkot tekstiä, ominaisuuksien linja-lohkon elementit ovat palautettua haluttuun fontin koon. Esimerkiksi fontti-koko: 1em. Menetelmä ei ole aina mukavaa, niin se on paljon yleisempää versio ulkoisten marginaalit.

Kohdistamalla Blocks voit luoda kauniita ja toimiva sivut: yleinen ulkoasu ja taitto, sekä sijainti tavaroiden kaupoissa ja valokuvia paikalle pienen.