Jokainen taittosuunnittelija kohtaa jatkuvasti tarpeen kohdistaa sisältö lohkoon: vaaka- tai pystysuunnassa. Tästä aiheesta on useita hyviä artikkeleita, mutta ne kaikki tarjoavat paljon mielenkiintoisia, mutta vähän käytännöllisiä vaihtoehtoja, minkä vuoksi sinun on käytettävä ylimääräistä aikaa pääkohtien korostamiseen. Päätin esittää nämä tiedot minulle sopivassa muodossa, jotta en enää googlettaisi.

Lohkojen kohdistaminen tunnettuihin kokoihin

Helpoin tapa käyttää CSS:ää on kohdistaa lohkot, joilla on tiedossa korkeus (pystytasaus) tai leveys (vaakasuora tasaus).

Tasaus pehmusteella

Joskus et voi keskittää elementtiä, vaan lisätä siihen reunat "täyte"-ominaisuuden avulla.

Esimerkiksi kuva on kooltaan 200 x 200 pikseliä, ja sinun on keskitettävä se 240 x 300 lohkoon. Voimme asettaa ulomman lohkon korkeuden ja leveyden = 200 pikseliä ja lisätä 20 pikseliä ylä- ja alareunaan, ja 50 vasemmalla ja oikealla.

.example-wrapper1 ( tausta : #535E73 ; leveys : 200px ; korkeus : 200px ; täyte : 20px 50px ; ) Kohdista ehdottomasti sijoitetut lohkot

Jos lohkon arvoksi on asetettu "sijainti: absoluuttinen", se voidaan sijoittaa suhteessa lähimpään emokseen "sijainti: suhteellinen". Tätä varten sinun on määritettävä sama arvo kaikille sisälohkon ominaisuuksille ("ylä", "oikea", "ala", "vasen" sekä "marginaali: auto".

*On vivahde: ​​sisemmän lohkon leveys (korkeus) + vasemman arvo (oikea, alhaalla, ylhäällä) ei saa ylittää päälohkon mittoja. On turvallisempaa määrittää 0 (nolla) vasemmanpuoleisille (oikealle, alhaalle, ylhäällä) ominaisuuksille.

.example-wrapper2 ( sijainti : suhteellinen ; korkeus : 250 pikseliä ; tausta : url (space.jpg) ; ) . cat-king ( leveys : 200 pikseliä ; korkeus : 200 kuvapistettä ; sijainti : absoluuttinen ; ylhäällä : 0 ; vasen : 0 ; alhaalla : 0 oikea : 0 marginaali : auto ;

Tekstin tasaamiseksi lohkossa on erityinen ominaisuus "text-align". Kun asetus on "keskellä", jokainen tekstirivi tasataan vaakasuunnassa. Monirivisessä tekstissä tätä ratkaisua käytetään äärimmäisen harvoin.

Minun piti kerran keksiä tekstiä näyttääkseni, kuinka tekstin tasaus toimii CSS:n avulla, mutta mitään mielenkiintoista ei tullut mieleen. Aluksi päätin kopioida lasten lorun jonnekin, mutta muistin, että tämä saattaa pilata artikkelin ainutlaatuisuuden, eivätkä rakkaat lukijamme löytäisi sitä Googlesta. Ja sitten päätin kirjoittaa tämän kappaleen - loppujen lopuksi pointti ei ole sen kanssa, vaan pointti on linjassa.

.example-text ( tekstin tasaus : keskellä ; täyte : 10px ; tausta : #FF90B8 ; )

On syytä huomata, että tämä ominaisuus ei toimi vain tekstille, vaan myös kaikille tekstin sisäisille elementeille ("display: inline").

Mutta tämä teksti on tasattu vasemmalle, mutta se on lohkossa, joka on keskitetty suhteessa kääreeseen.

.example-wrapper3 ( text-align : center ; background : #FF90B8 ; ) .inline-text ( näyttö : inline-block ; leveys : 40 % ; padding : 10px ; text-align : left ; background : #FFE5E5 ; ) Tasaus lohkot marginaalilla

Tunnetun leveyden omaavat lohkoelementit voidaan kohdistaa helposti vaakasuoraan asettamalla ne "margin-left: auto; margin-right: auto". Yleensä käytetään lyhennettyä merkintää: "marginaali: 0 auto" (mitä tahansa arvoa voidaan käyttää nollan sijasta). Mutta tämä menetelmä ei sovellu pystysuoraan kohdistukseen.

.lama-wrapper ( korkeus : 200px ; tausta : #F1BF88 ; ) .lama1 ( korkeus : 200px ; leveys : 200px ; tausta : url(lama.jpg) ; marginaali : 0 auto ; )

Näin kannattaa kohdistaa kaikki lohkot mahdollisuuksien mukaan (missä ei vaadita kiinteää tai absoluuttista asemointia) - se on loogisin ja sopivin. Vaikka tämä näyttää itsestään selvältä, olen joskus nähnyt pelottavia esimerkkejä negatiivisilla sisennyksillä, joten päätin selventää.

Pystysuuntainen kohdistus

Pystysuuntainen kohdistus on paljon ongelmallisempi - ilmeisesti tätä ei ollut säädetty CSS:ssä. Halutun tuloksen saavuttamiseksi on useita tapoja, mutta kaikki eivät ole kovin kauniita.

Kohdistus rivinkorkeusominaisuuden kanssa

Siinä tapauksessa, että lohkossa on vain yksi viiva, voit saavuttaa sen pystysuoran kohdistuksen käyttämällä "line-height" -ominaisuutta ja asettamalla sen halutulle korkeudelle. Varmuuden vuoksi kannattaa asettaa myös "height", jonka arvo on yhtä suuri kuin rivin korkeus, koska jälkimmäistä ei tueta kaikissa selaimissa.

.example-wrapper4 ( rivin korkeus : 100px ; väri : #DC09C0 ; tausta : #E5DAE1 ; korkeus : 100px ; tekstin tasaus : keskellä ; )

On myös mahdollista saavuttaa lohkojen kohdistus useilla viivoilla. Tätä varten sinun on käytettävä ylimääräistä käärelohkoa ja asetettava rivin korkeus sille. Sisäinen lohko voi olla monirivinen, mutta sen on oltava "inline". Sinun on käytettävä siihen "verical-align: middle".

.example-wrapper5 ( line-height : 160px ; height : 160px ; font-size : 0 ; background : #FF9B00 ; ) .example-wrapper5 .text1 ( näyttö : inline-block ; font-size : 14px : line-height : ; line-height 1.5 pystysuuntaus : tausta : #FFFAF2 ;

Käärityslohkossa on oltava "font-size: 0" asetettuna. Jos et aseta fonttikokoa nollaan, selain lisää muutaman ylimääräisen pikselin. Sinun on myös määritettävä fontin koko ja rivin korkeus sisemmälle lohkolle, koska nämä ominaisuudet peritään vanhemmalta.

Pystytasaus taulukoissa

"Verical-align"-ominaisuus vaikuttaa myös taulukon soluihin. Kun arvoksi on asetettu "keski", solun sisällä oleva sisältö tasataan keskelle. Tietenkin taulukon ulkoasua pidetään nykyään arkaaisena, mutta poikkeustapauksissa voit simuloida sitä määrittämällä "display: table-cell".

Käytän yleensä tätä vaihtoehtoa pystysuoraan kohdistukseen. Alla on esimerkki asettelusta valmiista projektista. Juuri tällä tavalla pystysuoraan keskitetty kuva on kiinnostava.

.one_product .img_wrapper ( näyttö : taulukkosolu ; korkeus : 169 pikseliä ; pystytasaus : keskellä ; ylivuoto : piilotettu ; tausta : #fff ; leveys : 255px ; ) .one_product img ( maksimikorkeus : 169px ; max - leveys0 % ; min leveys : 140px : lohko ;

On muistettava, että jos elementillä on jokin muu "kelluke" kuin "ei mitään", se on joka tapauksessa lohko (näyttö: lohko) - silloin on käytettävä ylimääräistä lohkokäärettä.

Kohdistus lisäelementillä

Ja upotettuja elementtejä varten voit käyttää "pystysuoraan kohdistusta: keskellä". Tämä kohdistaa kaikki elementit "display: inline", jotka ovat samalla rivillä suhteessa yhteiseen keskiviivaan.

Sinun on luotava apulohko, jonka korkeus on yhtä suuri kuin päälohkon korkeus, sitten haluttu lohko keskitetään. Tätä varten on kätevää käyttää pseudoelementtejä:ennen tai:jälkeen.

.example-wrapper6 ( korkeus : 300 pikseliä ; tekstin tasaus : keskellä ; tausta : #70DAF1 ; ) .pudge ( näyttö : inline-block ; vertikaalinen tasaus : keskellä ; tausta : url(pudge.png) ; taustaväri : # fff ; leveys : 200px .riki ( näyttö : rivilohko ; korkeus : keskitasaus ;

Jos et välitä paljoakaan Explorer 8 -käyttäjistä tai välität niin paljon, että olet valmis lisäämään heille ylimääräisen javascriptin, voit käyttää "display: flex". Joustolaatikot käsittelevät hienoja kohdistusongelmia, ja keskitä sisältö sisään kirjoittamalla "margin: auto".

Toistaiseksi en ole käytännössä koskaan törmännyt tähän menetelmään, mutta sille ei ole erityisiä rajoituksia.

.example-wrapper7 ( näyttö : flex ; korkeus : 300px ; tausta : #AEB96A ; ) .example-wrapper7 img ( margin : auto ; )

No, siinä kaikki, mitä halusin kirjoittaa CSS-kohdistamisesta. Nyt sisällön keskittäminen ei ole ongelma!

Vlad Merževitš

Koska taulukon solujen sisältö voidaan kohdistaa samanaikaisesti vaaka- ja pystysuunnassa, mahdollisuudet ohjata elementtien sijaintia suhteessa toisiinsa laajenevat. Taulukoiden avulla voit asettaa kuvien, tekstin, lomakekenttien ja muiden elementtien tasauksen suhteessa toisiinsa ja koko verkkosivuun. Yleisesti ottaen kohdistus on tarpeen lähinnä visuaalisten yhteyksien luomiseksi eri elementtien välille sekä niiden ryhmittelyyn.

Pystysuuntainen keskitys

Yksi tapa näyttää vierailijalle sivuston painopiste ja nimi on käyttää aloitussivua. Tämä on ensimmäinen sivu, jolla on pääsääntöisesti flash-aloitusnäyttö tai kuva, joka ilmaisee sivuston pääidean. Kuva on myös linkki sivuston muihin osiin. Sinun on sijoitettava tämä kuva selainikkunan keskelle näytön tarkkuudesta riippumatta. Tätä tarkoitusta varten voit käyttää pöytää, jonka leveys ja korkeus on 100 % (esimerkki 1).

Esimerkki 1: Piirustuksen keskittäminen

Tasaus TABLE ( leveys: 100 %; /* pöydän leveys */ korkeus: 100 %; /* pöydän korkeus */ )

Tässä esimerkissä vaakasuora tasaus asetetaan align="center"-tunnisteparametrilla , ja solun sisältöä ei saa keskittää pystysuoraan, koska tämä on oletussijainti.

Jos haluat asettaa taulukon korkeudeksi 100%, sinun on poistettava , koodi ei ole enää voimassa.

Käyttämällä leveyttä ja korkeutta kattamaan koko verkkosivun käytettävissä oleva alue varmistaa, että taulukon sisältö on kohdistettu tarkasti selainikkunan keskelle sen koosta riippumatta.

Vaakasuora kohdistaminen

Yhdistämällä tunnisteen align (vaakasuora kohdistus) ja valign (pystysuuntainen kohdistus) -attribuutit , on sallittua asettaa useita elementtien paikkoja suhteessa toisiinsa. Kuvassa Kuva 1 näyttää tapoja kohdistaa elementit vaakasuoraan.

Katsotaanpa joitain esimerkkejä tekstin tasauksesta alla olevan kuvan mukaisesti.

Ylälinjaus

Solun sisällön ylätasauksen määrittäminen tagille sinun on asetettava valign-attribuutti arvolla top (esimerkki 2).

Esimerkki 2: Valignin käyttö

Tasaus

Sarake 1

Sarake 2

Tässä esimerkissä solujen ominaisuuksia ohjataan tunnisteparametreilla , mutta se on myös kätevämpää vaihtaa tyylien kautta. Erityisesti solujen tasaus määritetään pystytasaus- ja tekstitasausominaisuuksilla (esimerkki 3).

Esimerkki 3: Tyylien käyttäminen tasaukseen

Tasaus TABLE ( leveys: 100 %; /* Taulukon leveys */ ) #col1 (leveys: 75 %; /* Ensimmäisen sarakkeen leveys */ tausta: #f0f0f0; /* Ensimmäisen sarakkeen taustaväri */ ) #col2 (leveys: 25 % /* Toisen sarakkeen leveys */ tausta: #fc5 /* Toisen sarakkeen taustaväri */ tekstin tasaus: oikealle ; / * Tasaus yläreunaan */ täyte: 5px /* Reunukset solun sisällön ympärillä */ )

Sarake 1

Sarake 2

Tässä esimerkissä koodin lyhentämiseksi käytetään valitsimien ryhmittelyä, koska pystytasaus- ja täyteominaisuuksia käytetään kahdessa solussa samanaikaisesti.

Alhainen kohdistus tehdään samalla tavalla, mutta yläarvon sijasta käytetään alaosaa.

Keskitasaus

Solun sisältö on oletusarvoisesti tasattu pystyviivan keskelle, joten jos sarakkeilla on eri korkeus, sinun on asetettava tasaus yläreunaan. Joskus joudut silti jättämään alkuperäisen kohdistusmenetelmän, esimerkiksi asetettaessa kaavoja, kuten kuvassa 10 näkyy. 2.

Tässä tapauksessa kaava sijaitsee tiukasti selainikkunan keskellä, ja sen numero sijaitsee oikeassa reunassa. Elementtien järjestämiseksi tällä tavalla tarvitset taulukon, jossa on kolme solua. Ulomilla soluilla tulee olla samat mitat, keskimmäisessä solussa kohdistus on keskitetty ja oikeassa solussa oikeaa reunaa pitkin (esimerkki 4). Tämä solujen määrä tarvitaan varmistamaan, että kaava on sijoitettu keskelle.

Esimerkki 4: Kaavan kohdistus

Tasaus

(18.6)

Tässä esimerkissä taulukon ensimmäinen solu jätetään tyhjäksi, sillä se luo vain sisennyksen, joka voidaan muuten asettaa myös tyyleillä.

Lomakeelementtien tasaus

Taulukoiden avulla on kätevää määrittää lomakekenttien sijainti, varsinkin kun ne ovat tekstin välissä. Yksi kommentin syöttämiseen tarkoitetun lomakkeen suunnitteluvaihtoehdoista on esitetty kuvassa. 3.

Varmistaaksesi, että lomakekenttien vieressä oleva teksti on tasattu oikealle ja itse lomakeelementit vasemmalle, tarvitset taulukon, jossa on näkymätön reuna ja kaksi saraketta. Vasen sarake sisältää itse tekstin ja oikea sarake tekstikentät (esimerkki 5).

Esimerkki 5: Lomakekenttien tasaus

Tasaus

Nimi
Sähköposti
Kommentti

Tässä esimerkissä soluihin, joissa vaaditaan tasaus oikealle, lisätään align="right"-attribuutti. Jotta varmistetaan, että Kommentti-otsikko sijoittuu monirivisen tekstin yläosaan, vastaava solu asetetaan yläreunaan käyttämällä valign-attribuuttia.

CSS vertikaalinen tasausominaisuus vastaa sivun tekstin ja kuvien pystysuuntaamisesta. Tärkeä ominaisuus on, että se toimii vain taulukkoelementtien, inline- ja inline-block-elementtien kanssa. Kaikki nykyaikaiset selaimet tukevat.

CSS:n pystysuuntainen syntaksi

... vertikaalinen tasaus : arvo ; ...

• perusviiva - kohdistus esi-isän perusviivaan (tai yksinkertaisesti vanhemman alarajaan)
• alaosa - kohdista rivin alaosaan (tai elementtiin, joka sijaitsee kaikkien alapuolella)
• keskellä - kohdista elementin keskipiste ylätason perusviivaan plus puoleen ylätason korkeudesta
• ali - näyttö näkyy rivin alla (näyttää alaindeksiltä)
• super - näyttö näkyy rivin yläpuolella (yläindeksinä)
• text-bottom - kohdista elementin alareuna rivin alareunaan
• text-top - kohdista elementin yläreuna rivin yläreunaan
• yläreuna - kohdista elementin yläreuna rivin korkeimman elementin yläosaan
• perii - perii vanhemman arvon
• arvo - ilmoitettu pikseleinä. Positiivinen luku siirtyy ylöspäin suhteessa perusviivaan. Negatiivinen alaspäin
• korko - ilmaistuna prosentteina. Positiivinen luku siirtyy ylöspäin suhteessa perusviivaan. Negatiivinen alaspäin

Pystytasauksen oletusarvo:

• perusviiva (rivielementeille)
• keskellä (taulukon soluille)

Pystytasaus taulukoissa

Yleisin pystysuuntauksen käyttö on taulukon soluissa. Tagissa

käytä valign-attribuuttia.

CSS valign -syntaksi taulukoille

Missä arvolla voi olla seuraavat arvot:

• perusviiva - kohdistus ensimmäisen tekstirivin perusviivaan
• pohja - kohdista taulukon solun alareunaan
• keskellä - kohdistus solun keskelle
• yläreuna - kohdista solun yläreunaan

Esimerkiksi:

or

Tasaa ylös

Keskitasaus

Alalinjaus

Tasaa ylös

Keskitasaus

Alalinjaus

Esimerkkejä pystytasauksista Esimerkki 1: pystytasausarvot: perusviiva, alaosa, ylhäältä, sub .vert_align_baseline ( näyttö : inline-block ; pystytasaus : perusviiva ; tausta : #ccc ; ) .vert_align_top ( näyttö : inline-block ; pystysuora -align: tausta: #ccc ccc ) .vert_align_text_top ( näyttö : inline-block ; vertikaalinen tasaus : yläreuna ; tausta : #ccc ; )
Tasattu teksti vert_align_baseline
Tasattu teksti vert_align_bottom
Tasattu teksti vert_align_top
Tekstin vert_align_sub tasaus Esimerkki 2: pystytasausarvot: absoluuttiset arvot ja prosentit

Alla on esimerkkejä pystysuorasta kohdistuksesta absoluuttisilla arvoilla ja prosenttiosuuksilla.

.vert_align_abs_plus ( näyttö : inline-block ; vertical-align : 10px ; background : #aaa ; ) .vert_align_abs_minus ( näyttö : inline-block ; vertical-align : -5px ; background : #aaa ; ) .vert-align_per:inline- block ; pystysuora tasaus : 50 % ;

Muuntaa sivulla seuraavaksi:

Lähdemerkkijono. Teksti tasattu 10 pikseliä ylöspäin
Lähdemerkkijono. Teksti tasattu 5 pikseliä alaspäin
Lähdemerkkijono. Teksti tasattu 50 % ylöspäin
Lähdemerkkijono. Teksti tasattu 30 % alaspäin

Huomautus

Vertikaalinen tasaus: keskiarvo ei kohdista rivin elementtiä rivin suurimman elementin keskelle (kuten voisi odottaa). Sen sijaan arvo keskitasaa elementin suhteessa hypoteettiseen pieniin kirjaimiin "X" (kutsutaan myös x-korkeudeksi).

Päästäksesi pystysuoraan kohdistukseen JavaScriptistä, sinun on kirjoitettava seuraava rakenne:

object.style.verticalAlign ="ARVO "

Hyvin usein layoutissa on tarpeen keskittää jokin elementti vaakasuoraan ja/tai pystysuoraan. Siksi päätin tehdä artikkelin erilaisilla keskitystavoilla, jotta kaikki on käsillä yhdestä paikasta.

Vaakasuora kohdistusmarginaali: auto

Vaakasuoraa kohdistusta marginaalilla käytetään, kun keskitetyn elementin leveys tunnetaan. Toimii lohkoelementeille:

Element (marginaali vasen: automaattinen; marginaali oikea: automaattinen; leveys: 50%; )

Automaattinen määrittäminen oikealle ja vasemmalle marginaalille tekee niistä yhtä suuret, mikä keskittää elementin vaakasuoraan ylälohkoon.

tekstin tasaus: keskellä

Tämä menetelmä sopii tekstin keskittämiseen lohkon sisällä. tekstin tasaus: keskellä:

Tasaus tekstin tasaus .wrapperin kanssa ( text-align: center; )

Olen keskellä

sijainti ja negatiivinen marginaali vasemmalla

Soveltuu tunnetun levyisten lohkojen keskittämiseen. Annamme ylälohkon sijainnin: suhteessa siihen kohtaan, keskitetyn elementin sijainti: absoluuttinen , vasen: 50% ja negatiivinen marginaali-vasen, jonka arvo on yhtä suuri kuin puolet elementin leveydestä:

Kohdistus sijainnin kanssa .wrapper ( sijainti: suhteellinen; ) .wrapper p ( vasen: 50 %; marginaali: 0 0 0 -100 kuvapistettä; sijainti: absoluuttinen; leveys: 200 kuvapistettä; )

Olen keskellä

näyttö: inline-block + tekstin tasaus: keskellä

Menetelmä soveltuu tuntemattoman levyisten lohkojen kohdistamiseen, mutta vaatii kääreen ylätason. Voit esimerkiksi keskittää vaakasuuntaisen valikon seuraavasti:

Kohdistus näytön kanssa: inline-block + tekstin tasaus: keskellä; .navigation ( text-align: center; ) .navigation li ( näyttö: inline-block; )

• Koti
• kirjailijasta

Pystysuuntauslinjan korkeus

Tasaaksesi yhden tekstirivin, voit käyttää samoja korkeus- ja riviväliarvoja päälohkolle. Sopii painikkeille, valikon kohteille jne.

rivinkorkeus .wrapper ( korkeus: 100px; rivinkorkeus: 100px; )

Olen pystysuorassa linjassa

asema ja negatiivinen marginaali ylöspäin

Elementti voidaan kohdistaa pystysuunnassa antamalla sille kiinteä korkeus ja soveltamalla sijaintia: absoluuttinen ja negatiivinen marginaali on puolet kohdistettavan elementin korkeudesta. Päälohkolle on annettava sijainti: suhteellinen:

Kääre ( sijainti: suhteellinen; ) elem ( korkeus: 200 pikseliä; marginaali: -100 kuvapistettä 0 0; sijainti: absoluuttinen; yläosa: 50 %; )

Tällä tavalla voit keskittää elementin sivulla käyttämällä sijoittelua ja negatiivisia marginaaleja.

näyttö: taulukko-solu

Pystysuuntaista tasausta varten elementtiin sovelletaan display: table-cell -ominaisuutta, mikä pakottaa sen emuloimaan taulukon solua. Asetamme myös sen korkeuden ja pystysuuntauksen: keskellä . Kääritään tämä konttiin dislpay: table; :

Pystysuuntainen kohdistusnäyttö: taulukko-solu .wrapper ( näyttö: taulukko; leveys: 100 %; ) .solu ( näyttö: taulukko-solu; korkeus: 100 pikseliä; pystytasaus: keskellä; )

Olen pystysuorassa linjassa

Elementin dynaaminen tasaus sivulla

Tarkastelimme tapoja kohdistaa elementit sivulla CSS:n avulla. Katsotaanpa nyt jQuery-toteutusta.

Yhdistetään jQuery sivulle:

Suosittelen yksinkertaisen funktion kirjoittamista sivun elementin keskittämiseksi, kutsutaan sitä nimellä alignCenter() . Elementti itsessään toimii argumenttina funktiolle:

Funktio alignCenter(elem) ( // koodi tässä )

Funktion rungossa laskemme ja määritämme dynaamisesti sivun keskustan koordinaatit CSS:n vasemmalle ja yläpuolelle:

Funktio alignCenter(elem) ( elem.css(( left: ($(window).width() - elem.width())) / 2 + "px", top: ($(window).height() - elem. korkeus()) / 2 + "px" // muista lisätä sijainti: absoluuttinen elementtiin koordinaattien laukaisemiseksi )) )

Toiminnon ensimmäisellä rivillä saamme asiakirjan leveyden ja vähennämme siitä elementin leveyden jaettuna puoliksi - tämä on sivun vaakasuora keskikohta. Toinen rivi tekee saman asian, vain korkeudella pystysuuntausta varten.

Toiminto on valmis, jäljellä on vain liittää se DOM-valmius- ja ikkunan koonmuutostapahtumiin:

$(function() ( // kutsuu keskitysfunktiota kun DOM on valmis alignCenter($(elem)); // kutsu funktiota ikkunan kokoa muutettaessa $(window).resize(function() ( alignCenter($(elem) )); )) // elementin keskitysfunktio alignCenter(elem) ( elem.css(( // vasemman ja yläkoordinaatin laskeminen: ($(window).width() - elem.width()) / 2 + " px", yläosa: ($(ikkuna).korkeus() - elem.height()) / 2 + "px" )) ) ))

Flexboxin sovellus

Uudet CSS3-ominaisuudet, kuten Flexbox, ovat vähitellen yleistymässä. Tekniikka auttaa luomaan merkintöjä ilman kellukkeita, paikannusta jne. Sitä voidaan käyttää myös elementtien keskittämiseen. Käytä esimerkiksi Flexboxia yläelementtiin.wrapper ja keskitä sisältö sisään:

Wrapper ( näyttö: -webkit-box; näyttö: -moz-box; näyttö: -ms-flexbox; näyttö: -webkit-flex; näyttö: flex; korkeus: 500px; leveys: 500px; ) .wrapper .content ( marginaali: auto /* marginaali: 0 auto vain vaaka */ /* marginaali: vain pystysuora */ ) Lorem ipsum dolor sit amet;

Tämä sääntö keskittää elementin vaakasuoraan ja pystysuoraan samanaikaisesti - marginaali toimii nyt vaakasuuntauksen lisäksi myös pystysuorassa tasauksessa. Ja ilman tiedossa olevaa leveyttä/korkeutta.

Aiheeseen liittyvät resurssit Auta projektia

Tänään, hyvä lukija, käsittelemme pystysuoran kohdistuksen ongelmaa lohkossa div.

Todennäköisesti tiedät jo upean CSS-ominaisuuden vertikaal-align olemassaolosta. Ja Jumala itse käski meidät käyttämään juuri tätä ominaisuutta pystysuoraan kohdistukseen (ei turhaan, että sillä on niin itsestään selvä nimi).

Ongelman selvitys: Muuttuvan korkeuden lohkon sisältö on kohdistettava keskelle pystysuoraan nähden.

Aloitetaan nyt ongelman ratkaiseminen.

Ja niin, meillä on lohko, sen korkeus voi muuttua:

Estä sisältö

Ensimmäinen asia, joka tulee mieleen, on tehdä seuraava temppu:

Estä sisältö

On täysi syy uskoa, että lause Estä sisältö kohdistetaan div-säiliön keskikorkeuteen.

Mutta se ei ollut siellä! Emme saavuta odotettua keskikohdistusta tällä tavalla. Ja miksi? Vaikuttaa siltä, ​​​​että kaikki on ilmoitettu oikein. Osoittautuu, että tämä on hiero: omaisuus pystytasaus voidaan käyttää vain tasaamaan taulukon solujen sisältö tai tasaamaan rivielementtejä suhteessa toisiinsa.

Mitä tulee tasaukseen taulukon solun sisällä, mielestäni kaikki on selvää. Mutta selitän toisen tapauksen tekstielementeillä.

Sisäisten elementtien pystysuuntainen kohdistus

Oletetaan, että sinulla on tekstirivi, joka on jaettu rivitunnisteiden avulla osiin:

Teksti toivottaa sinut tervetulleeksi!

Sisäinen tagi on säilö, jonka ulkonäkö ei aiheuta sisällön rivittymistä uudelle riville.

Lohkotunnisteen toiminta saa säilön sisällön rivittymään uudelle riville.

on lohkotunniste. Jos laitamme tekstinpalat lohkoihin , niin jokainen niistä on uudella rivillä. Tunnisteen käyttö , joka toisin kuin , on pieni, kontteja ei siirretä uudelle riville, kaikki kontit jää yhdelle riville.

Säiliö kätevä käyttää määritettäessä tekstin osaa erityisellä muotoilulla (korostamalla sitä värillä, eri fontilla jne.)

Säiliöille Käytä seuraavia CSS-ominaisuuksia:

#perviy( vertical-align:sub; ) #vtoroy( vertical-align:3px; ) #tretiy( vertical-align:-3px; )

Tuloksena oleva tekstirivi näyttää tältä:

Tämä ei ole muuta kuin sisäisten elementtien pystysuuntaista kohdistusta, ja CSS:n vertikaalinen tasausominaisuus selviää tästä tehtävästä täydellisesti.

Olemme hieman hajamielisiä, nyt palaamme päätehtävämme pariin.

Pystysuuntainen kohdistus div-säiliössä

Riippumatta siitä, käytämme pystysuuntaista tasausominaisuutta kohdistamiseen div-säilön sisällä. Kuten jo sanoin, tätä ominaisuutta voidaan käyttää rivielementtien kohdistamisessa (keskustelimme tästä tapauksesta yksityiskohtaisesti edellä, eikä se sovellu meille div-säiliöön kohdistumiseen); ei jää muuta kuin käyttää sitä tosiasiaa pystytasaus toimii taulukon soluille.

Kuinka voimme käyttää tätä? Meillä ei ole pöytää, vaan työskentelemme div-kontin kanssa.

Hah, se osoittautuu hyvin yksinkertaiseksi.

CSS-näyttöominaisuuden avulla voimme muuttaa div-lohkomme taulukkosoluksi, tämä voidaan tehdä helposti ja luonnollisesti:

Oletetaan, että meillä on luokkadiv textalign:

Estä sisältö

Tälle lohkolle määritämme seuraavan CSS-ominaisuuden:

Textalign( näyttö: taulukko-solu; )

Tämä CSS-ohje muuttaa divimme ihmeellisesti taulukon soluksi muuttamatta sitä visuaalisesti millään tavalla. Ja taulukon solulle voimme soveltaa ominaisuutta pystytasaus kokonaan ja haluttu pystysuuntaus toimii.

Kaikki ei kuitenkaan voi päättyä niin yksinkertaisesti. Meillä on upea IE-selain. Hän ei osaa työskennellä kiinteistön kanssa näyttö: taulukko-solu(Suosittelen lukemaan taulukon, joka havainnollistaa tämän CSS-ominaisuuden toimivuutta eri selaimissa verkkosivustolla htmlbook.ru). Siksi meidän on turvauduttava erilaisiin temppuihin.

On monia tapoja saada tasaus div-säilössä kaikille selaimille:

• Menetelmä käyttämällä ylimääräistä div-säiliötä
• Ilmaisua käyttävä menetelmä. Se liittyy hankalaan lohkojen korkeuksien laskemiseen. Et voi tehdä tätä ilman JavaScriptin tuntemusta.
• Line-height-ominaisuuden käyttäminen. Tämä menetelmä soveltuu vain pystysuuntaukseen tunnetun korkeuden omaavassa lohkossa, eikä sitä siksi voida soveltaa yleisessä tapauksessa.
• Absoluuttisen ja suhteellisen sisällön offsetin käyttäminen IE-selaimen tapauksessa. Tämä menetelmä vaikuttaa minusta ymmärrettävimmältä ja yksinkertaisimmalta. Lisäksi se on toteutettavissa vaihtelevan korkeuden div-säiliölle. Tarkastelemme sitä tarkemmin.

Kuten ymmärrät, meidän on vain ratkaistava pystysuoran kohdistuksen ongelma IE:ssä, joka liittyy sen väärinkäsitykseen ominaisuudesta näyttö: taulukko-solu(Eivät IE6, IE7 tai IE8 tunne tätä ominaisuutta). Siksi ilmoitamme muut CSS-ominaisuudet käyttämällä ehdollista kommenttia erityisesti IE-perheen selaimille.

Ehdollinen kommentti

Rakennustyyppi:

... Ohjeet, jotka ovat voimassa vain, jos hakasulkeissa oleva ehto on totta...

kutsutaan ehdolliseksi kommentiksi (ole varovainen, ehdollisen kommentin tyypin on vastattava täysin annettua esimerkkiä välilyöntiin asti).

Tällaisen ehdollisen kommentin sisältämät ohjeet suoritetaan vain, jos tätä koodia tulkitseva selain kuuluu IE-perheeseen.

Siten ehdollisen kommentin avulla voimme piilottaa koodin kaikilta selaimilta paitsi IE:ltä.

Ongelman ratkaisu

Kaiken tämän persiljan takia meidän on lisättävä HTML-koodiimme kaksi lisäsäiliötä. Tekstilohkomme näyttää tältä:

Tämä on jonkinlainen vahvistusteksti.
Se koostuu kahdesta rivistä.

Luokan div-säilölle textalign CSS-ominaisuudet on asetettu siten, että sen sisältö kohdistetaan pystysuoraan kaikille normaaleille selaimille (lukuun ottamatta tietysti IE:tä):

Näyttö: taulukko-solu; pystysuuntaus: keskellä;

Ja kaksi muuta ominaisuutta, jotka määrittävät lohkon leveyden ja korkeuden:

Leveys: 500px; korkeus: 500px;

Tämä riittää kohdistamaan säilön sisällön pystysuoraan kaikissa selaimissa paitsi IE:ssä.

Nyt alamme lisätä kohdistukseen liittyviä ominaisuuksia IE-perheen selaimille (niille käytimme lisälohkoja div Ja jänneväli):

Tagiin viitaten div luokkakorttelin sisällä textalign. Tätä varten sinun on ensin ilmoitettava luokan nimi ja sitten välilyönnillä erotettu tunniste, jota käytämme.

Tekstitasaus div( sijainti: absoluuttinen; yläosa: 50 %; )

Tämä muotoilu tarkoittaa: kaikille div-tunnisteille lohkon sisällä, jossa on luokka textalign käytä lueteltuja ominaisuuksia.

Vastaavasti lohkolle määritetyt tyylit textalign on muokattu:

Textalign( näyttö: taulukko-solu; pystytasaus: keskellä; leveys: 500 pikseliä; korkeus: 500 kuvapistettä; sijainti: suhteellinen; )

Nyt tekstilohkon vasenta yläpistettä on siirretty alaspäin 50%.

Selittääkseni, mitä tapahtuu, piirsin kuvan:

Kuten kuvasta näkyy, olemme edistyneet jonkin verran. Mutta ei siinä vielä kaikki! Keltaisen lohkon vasen yläpiste on todellakin siirtynyt 50 % alaspäin suhteessa emolohkoon (violetti). Mutta tarvitsemme viisikymmentä prosenttia violetin lohkon korkeudesta keltaisen lohkon keskipisteeksi, ei sen vasempaan yläpisteeseen.

Nyt tunniste tulee peliin jänneväli ja sen suhteellinen sijainti:

Tekstin tasausväli( sijainti: suhteellinen; yläosa: -50 %; )

Näin ollen olemme siirtäneet keltaista lohkoa ylöspäin 50 % sen korkeudesta suhteessa sen alkuasentoon. Kuten ymmärrät, keltaisen lohkon korkeus on yhtä suuri kuin keskitetyn sisällön korkeus. Ja viimeinen toimenpide span säiliössä asetti sisältömme keskelle purppuraa. Hurraa!

Leikitään vähän temppuja

Ensinnäkin meidän on piilotettava persilja kaikista normaaleista selaimista ja avattava se IE:lle. Tämä voidaan tietysti tehdä ehdollisen kommentin avulla, emme turhaan tutustuneet siihen:

.textalign div( position: absoluuttinen; top: 50%; ) .textalign span( position: suhteellinen; top: -50%; )

On pieni ongelma. Jos keskitetty sisältö on liian korkea, tämä johtaa epämiellyttäviin seurauksiin: pystysuunnassa vieritys saa ylimääräistä korkeutta.

Ratkaisu ongelmaan: sinun on lisättävä omaisuus ylivuoto piilotettu lohko textalign.

Tutustu kiinteistöön tarkemmin ylivuoto mahdollista vuonna.

Lohkon lopulliset CSS-ohjeet textalign on muotoa:

Tekstin tasaus (näyttö: taulukkosolu; pystytasaus: keskellä; leveys: 500 kuvapistettä; korkeus: 500 kuvapistettä; sijainti: suhteellinen; ylivuoto: piilotettu; reuna: 1px tasainen musta; )

Olen pahoillani, unohdin mainita yhden tärkeän asian. Jos yrität asettaa luokkalohkon korkeutta textalign prosentteina, niin mikään ei toimi sinulle.

Keskitys säädettävän korkeuden lohkossa

Hyvin usein on tarpeen asettaa luokkalohkon korkeus textalign ei pikseleinä, vaan prosentteina päälohkon korkeudesta ja kohdista div-säilön sisältö keskelle.

Ongelmana on, että tätä ei voi tehdä taulukon solulle (mutta luokkalohkolle textalign muuttuu tarkalleen taulukon soluksi ominaisuuden ansiosta näyttö:taulukko-solu).

Tässä tapauksessa sinun on käytettävä ulkoista lohkoa, jolle on määritetty CSS-ominaisuus näyttö: taulukko ja asetat jo sille korkeuden prosenttiarvon. Sitten lohko sisäkkäsi siihen CSS-direktiivin kanssa näyttö:taulukko-solu, perii mielellään päälohkon korkeuden.

Muuttuvan korkeuden lohkon toteuttamiseksi esimerkissämme muokkaamme CSS:ää hieman:

Luokkaan textalign muutamme kiinteistön arvoa näyttö Kanssa pöytäsolu päällä pöytä ja poista yhdenmukaistamisdirektiivi pystysuuntaus: keskellä. Nyt voimme turvallisesti muuttaa korkeusarvon 500 pikselistä esimerkiksi 100 %:iin.

Joten luokkalohkon CSS-ominaisuudet textalign näyttää tältä:

Textalign( näyttö: taulukko; leveys: 500 pikseliä; korkeus: 100 %; sijainti: suhteellinen; ylivuoto: piilotettu; reuna: 1px tasainen musta; )

Jäljelle jää vain sisällön keskittäminen. Tätä varten div-säilö on sijoitettu luokkalohkoon textalign(tämä on sama keltainen lohko kuvassa), sinun on asetettava CSS-ominaisuus näyttö:taulukko-solu, se perii 100 %:n korkeuden ylälohkosta textalign(violetti lohko). Eikä mikään estä meitä kohdistamasta keskelle sisäkkäisen div-säilön sisältöä ominaisuuden kanssa pystysuuntaus: keskellä.

Saamme toisen lisäluettelon säilössä olevan div-lohkon CSS-ominaisuuksista textalign.

Textalign div( näyttö: taulukko-solu; pystytasaus: keskellä; )

Siinä koko temppu. Halutessasi voit säätää korkeutta sisällön keskellä.

Lisätietoja muuttuvan korkeuden lohkon pystysuuntaamisesta on kohdassa .