näyttömenetelmä taulukkona, voimme käyttää siinä vertikaalista tasausominaisuutta (joka toimii eri tavalla eri elementeissä).

#wrapper( näyttö: taulukko; ) #cell( näyttö: taulukko-solu; pystytasaus: keskellä; )

Plussat

• Sisältö voi muuttaa korkeutta dynaamisesti (korkeutta ei ole määritelty CSS:ssä).
• Sisältöä ei katkaista, jos sille ei ole tarpeeksi tilaa.

Miinukset

• Ei toimi IE 7:ssä tai vanhemmassa
• Paljon sisäkkäisiä tunnisteita

2. menetelmä

Tämä menetelmä käyttää div:n absoluuttista sijoittelua siten, että yläreuna on 50 % ja marginaali yläosa miinus puolet sisällön korkeudesta. Tämä tarkoittaa, että objektilla on oltava kiinteä korkeus, joka on määritelty CSS-tyyleissä.

Koska korkeus on kiinteä, voit asettaa overflow:auto; sisällön sisältävälle div-sisällölle, joten jos sisältö ei mahdu, näkyviin tulee vierityspalkkeja.

#sisältö (sijainti: absoluuttinen; yläosa: 50 %; korkeus: 240 kuvapistettä; yläreuna: -120 kuvapistettä; /* miinus puolet korkeudesta */ )

Plussat

• Toimii kaikissa selaimissa.
• Ei ole turhaa pesintää.

Miinukset

• Kun tilaa ei ole tarpeeksi, sisältö katoaa (esimerkiksi div on rungon sisällä ja käyttäjä on pienentänyt ikkunoita, jolloin vierityspalkit eivät tule näkyviin.

3. menetelmä

Tässä menetelmässä käärimme sisällön div toisella div:llä. Asetetaan sen korkeus 50 %:ksi (korkeus: 50 %;) ja alamarginaali puoleen korkeudesta (margin-bottom:-contentheight;). Sisältö selkeästi kelluu ja on keskitetty.

#floater( float: vasen; korkeus: 50%; margin-bottom: -120px; ) #content( selkeä: molemmat; korkeus: 240px; sijainti: suhteellinen; )

Plussat

• Toimii kaikissa selaimissa.
• Kun tilaa ei ole tarpeeksi (esimerkiksi kun ikkunaa pienennetään), sisältöä ei rajata, vierityspalkit tulevat näkyviin.

Miinukset

• Voin ajatella vain yhtä asiaa: että käytetään ylimääräistä tyhjää elementtiä.

4. menetelmä.

Tämä menetelmä käyttää ominaisuutta position:absolute; kiinteillä mitoilla (leveys ja korkeus) divaan. Sitten asetamme sen koordinaatit top:0; pohja:0; , mutta koska sillä on kiinteä korkeus, se ei voi venyä ja se on kohdistettu keskelle. Tämä on hyvin samankaltainen kuin tunnettu kiinteän levyisen lohkoelementin vaakasuora keskitysmenetelmä (marginaali: 0 auto;).

#sisältö( sijainti: absoluuttinen; ylhäällä: 0; alaosa: 0; vasen: 0; oikea: 0; marginaali: automaattinen; korkeus: 240 kuvapistettä; leveys: 70%; )

Plussat

• Erittäin yksinkertainen.

Miinukset

• Ei toimi Internet Explorerissa
• Sisältö leikataan pois ilman vierityspalkkeja, jos säiliössä ei ole tarpeeksi tilaa.

5. menetelmä

Tällä menetelmällä voit tasata yhden tekstirivin keskelle. Asetamme yksinkertaisesti tekstin korkeuden (rivin korkeuden) yhtä suureksi kuin elementin korkeus (korkeus). Tämän jälkeen viiva näkyy keskellä.

#content( korkeus: 100px; rivin korkeus: 100px; )

Plussat

• Toimii kaikissa selaimissa.
• Ei leikkaa tekstiä, jos se ei sovi.

Miinukset

• Toimii vain tekstin kanssa (ei toimi lohkoelementtien kanssa).
• Jos tekstiä on useampi kuin yksi rivi, se näyttää erittäin huonolta.

Tämä menetelmä on erittäin hyödyllinen pienille elementeille, kuten tekstin keskittämiselle painikkeeseen tai tekstikenttään.

Nyt tiedät kuinka saavuttaa pystysuora keskikohdistus. Tehdään yksinkertainen verkkosivusto, joka näyttää lopulta tältä:

Vaihe 1

On aina hyvä aloittaa semanttisella merkinnällä. Sivumme rakennetaan seuraavasti:

• #floater (sisällön keskelle)
• #keskitetty (keskielementti)
  • #puoli
    • #logo
    • #nav (luettelo
    • #sisältö
  • #bottom (tekijänoikeudet ja kaikki muu)

  Kirjoitetaan seuraava html-merkintä:

  Yritys

  • Koti
  • Tuotteet
  • Blogi
  • Ottaa yhteyttä
  • Noin

  Sivun otsikko

  Suunnittele kokonaisvaltaisesti uudelleen lisäarvoa tuottava ulkoistus prosessikeskeisen yhteistyön ja ideoiden jakamisen jälkeen. Yksinkertaista energisesti vaikuttavia markkinarakoja sallituilla vaatimuksilla. Holistisesti hallitseva premium-innovaatio pakottavien skenaarioiden jälkeen. Korosta inhimillisen pääoman korkeat standardit saumattomasti huippuluokan tuotteilla. Syndikaatoi standardien mukaiset skeemat selkeästi ennen vahvoja vortaaleja. Muokkaa ainutlaatuisesti hyödynnetty verkkovalmius valmiisiin tietoihin nähden.

  Otsikko 2

  Hyödynnä tehokkaasti räätälöity verkkovalmius asiakasohjattujen prosessien sijaan. Kasvata itsevarmasti monia alustoja koskevia vaatimuksia proaktiivisten teknologioiden suhteen. Lisää monitieteisiä metapalveluita kätevästi ilman yrityksen laajuisia rajapintoja. Tehosta kilpailukykyisiä strategisia teema-alueita kätevästi kohdistetuilla sähköisillä markkinoilla. Fosfluoresoivasti syndikaatoi maailmanluokan yhteisöjä lisäarvomarkkinoihin nähden. Keksi kokonaisvaltaiset palvelut asianmukaisesti uudelleen ennen vankkoja sähköisiä palveluita.

  Tekijänoikeusilmoitus tulee tänne

  Vaihe 2

  Nyt kirjoitetaan yksinkertaisin CSS elementtien sijoittamiseksi sivulle. Sinun tulee tallentaa tämä koodi style.css-tiedostoon. Juuri tähän linkki kirjoitetaan html-tiedostoon.

  Html, body ( marginaali: 0; täyttö: 0; korkeus: 100 %; ) body ( tausta: url("page_bg.jpg") 50 % 50 % no-repeat #FC3; font-family: Georgia, Times, serifs; ) #floater ( sijainti: suhteellinen; kelluvuus: vasen; korkeus: 50 %; marginaali-ala: -200px; leveys: 1px; ) #centered ( sijainti: suhteellinen; selkeä: vasen; korkeus: 400px; leveys: 80%; max -leveys: 800 px ; pohja: 0; täyttö: 20px;

  Ennen kuin kohdistamme sisältökeskuksemme, meidän on asetettava rungon ja html:n korkeudeksi 100 %. Koska korkeus lasketaan ilman sisäistä ja ulkoista pehmustetta (täyttö ja marginaali), asetamme ne (täyte) arvoon 0, jotta vierityspalkkeja ei ole.

  "Foater"-elementin alamarginaali on yhtä suuri kuin miinus puolet sisällön korkeudesta (400 kuvapistettä), eli -200 kuvapistettä ;

  Sivusi pitäisi nyt näyttää suunnilleen tältä:

  

  #keskitetty elementin leveys 80%. Tämä tekee sivustostamme kapeamman pienillä näytöillä ja leveämmällä suuremmilla näytöillä. useimmat sivustot näyttävät sopimattomilta uusissa leveissä näytöissä vasemmassa yläkulmassa. Min-width ja max-width -ominaisuudet rajoittavat myös sivuamme, jotta se ei näytä liian leveältä tai kapealta. Internet Explorer ei tue näitä ominaisuuksia. Sinun on asetettava se kiinteään leveyteen.

  Koska #centered-elementillä on position:relative joukko, voimme käyttää elementtien absoluuttista sijoittelua siinä. Aseta sitten ylivuoto:auto; #content-elementille, jotta vierityspalkit tulevat näkyviin, jos sisältö ei mahdu.

  Vaihe 3

  Viimeinen asia, jonka teemme, on lisätä hieman tyyliä, jotta sivu näyttää hieman houkuttelevammalta. Aloitetaan valikosta.

  #nav ul ( listatyyli: ei mitään; täyttö: 0; marginaali: 20px 0 0 0; tekstin sisennys: 0; ) #nav li ( täyttö: 0; marginaali: 3px; ) #nav li a ( näyttö: lohko; taustaväri: #e8e8e8 marginaali: 1px kiinteä: """; fontin paino: oikea; marginaali: 0 2px 0 5px; border-bottom-color; : #777; ) #nav li a:hover::after ( marginaali: 0 0 0 7px; väri: #f93; ) #nav li a:active ( täyttö: 8px 7px 6px 7px; )

  Ensimmäinen asia, jonka teimme parantaaksemme valikon ulkoasua, oli poistaa luettelomerkit asettamalla attribuutti list-style:none sekä myös täyttö ja täyte, koska ne vaihtelevat oletuksena suuresti eri selaimissa.

  Huomaa, että määritimme sitten, että linkit tulee esittää lohkoelementteinä. Nyt kun ne näytetään, ne on venytetty sen elementin koko leveydelle, jossa ne sijaitsevat.

  Toinen mielenkiintoinen asia, jota käytimme valikossa, ovat pseudo-luokat:ennen ja:jälkeen. Niiden avulla voit lisätä jotain ennen ja jälkeen elementin. Tämä on hyvä tapa lisätä kuvakkeita tai symboleja, kuten nuoli jokaisen linkin loppuun. Tämä temppu ei toimi Internet Explorer 7:ssä ja sitä vanhemmissa versioissa.

  

  Vaihe 4

  Ja viimeisenä, mutta ei vähäisimpänä, lisäämme suunnitteluomme joitain ruuveja vieläkin kauneuden lisäämiseksi.

  #centered ( -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; ) h1, h2, h3, h4, h5, h6 ( font-family: Helvetica, Arial, sans- serif; väri: #666; täyte-ylä: 0; ) #alhaalla ( täyte: 10px; fontin koko: 0,7 em; väri: #f03; ) #logo ( font-koko: 2em; tekstin tasaus: keskellä; väri: #999; ) #logo vahva ( fontin paino: normaali; ) #logon pituus ( näyttö: lohko; fontin koko: 4 em; rivin korkeus: 0,7 em; väri: #666; ) p, h2, h3 ( rivin korkeus: 1,6 em; ) a ( väri: #f03; )

  Näissä tyyleissä asetamme #centered-elementille pyöristetyt kulmat. CSS3:ssa tämän tekee border-radius-ominaisuus. Tätä ei ole vielä otettu käyttöön joissakin selaimissa, paitsi Mozilla Firefoxin ja Safarin/Webkitin etuliitteillä -moz ja -webkit.

  

  Yhteensopivuus

  Kuten luultavasti jo arvasit, pääasiallinen yhteensopivuusongelmien lähde on Internet Explorer:

  • #floater-elementillä on oltava leveys asetettuna
  • IE 6:ssa on ylimääräisiä pehmusteita valikkojen ympärillä

  237 154 katselukertaa

  Eri elementtien kohdistaminen, kuten verkkosivustolla tai sivulla, on aluksi vaikea tehtävä joillekin, koska se vaikuttaa tekstin pystysuuntaiseen tasaukseen. Kummallista kyllä, yksi vaikeimmista tavoista käyttää CSS:ää on sisällön keskittäminen. Sisällön keskittäminen vaakasuoraan on joissain tilanteissa suhteellisen helppoa. Sisällön keskittäminen pystysuoraan on lähes aina vaikeaa. Keskitetään eri elementti, joka on kohdistettava pystysuoraan CSS:n avulla. Tämä on ehdottomasti erittäin usein kysytty kysymys, joka aiheuttaa ongelmia suunnittelijoille ja web-mestareille. Pystykeskityksen suorittamiseen on kuitenkin monia menetelmiä, ja jokainen niistä on melko helppokäyttöinen.

  Jos olet joskus kokeillut sitä, se on hankalaa, varsinkin jos haluat välttää taulukoiden käyttöä. Onneksi avunhuutomme on kuultu, ja yksi CSS-arsenaaliin lisätyistä uusista aseista tämän ongelman ratkaisemiseksi on asettelu, joka tunnetaan joustavana laatikkoasetelmana. Kuten huomaat hetken kuluttua, se tarjoaa sinulle todella hienoja ominaisuuksia monimutkaisten asettelujen yksinkertaistamiseksi. Jotkut näistä hienoista toiminnoista mahdollistavat myös sisällön keskittämisen pysty- ja vaakasuunnassa, ja sitä käsittelemme tässä opetusohjelmassa. Voit tehdä tämän jossain määrin pehmusteella, mutta se voi viedä asettelusi pienemmille näytöille. Mukautetun CSS-luokan lisääminen tyylitaulukkoon tarkoittaa, että voit keskittää minkä tahansa sisällön pystysuoraan sekunneissa.

  Vaakasuora tasaus määrittää, kuinka kappaleen vasen ja oikea reuna ovat kohdakkain tekstilaatikon vasemman ja oikean reunan välillä. Pystysuuntainen kohdistus määrittää merkin pystysuoran sijoittelun tekstikentässä. Hyvien tapojen puute elementtien pystysuoraan keskittämiseen CSS:ssä on ollut synkkä virhe sen maineessa lähes koko sen olemassaolon ajan.

  Ensimmäinen menetelmä rivinkorkeudella

  Ensimmäinen menetelmä on yksinkertainen ja melko banaalinen, mutta sillä on haittoja, jotka rajoittavat sen käyttöä. Kun koodataan verkkosivuston html-sivuja, tekstisisällön rivivälit ovat luultavasti yksi niistä määritteistä, jotka yleensä jätetään oletusarvoiksi. Yleensä meidän on asetettava itse linjan korkeus, jonka mukana tulee samanlainen korkeus lohkolle, jossa sitä käytetään viivankorkeus omaisuutta.

  
  

  Tämä on ensimmäinen demonstraatioissa esitetty menetelmä

  
  
  
  CSS

  Constutesim_first(
  reunus: 2px kiinteä #bf1515;
  korkeus: 175px;
  }
  .constutesim_first > p(
  rivin korkeus: 175 kuvapistettä;
  marginaali:0;
  text-align:center;
  pehmuste: 0;
  fonttikoko: 17px;
  väri: #3152a0;
  kirjasinperhe: Tahoma;
  fontin paino: lihavoitu;
  }

  
  Voit myös heti nähdä, miltä kaikki näyttää todellisuudessa.

  Samankaltaisella menetelmällä on mahdollista toteuttaa kuvan sijoittaminen, joka on keskellä ja varmasti pystysuora. Tässä on vain määritettävä yksi ominaisuus: vertical-align: middle; joka vastaa kuvan näyttämisestä.

  

  
  

  .png">Toinen muunnelma, joka tulee kuvan mukana

  
  
  
  CSS

  Toinen muunnelma(
  reunus: 2px tasainen punainen;
  rivin korkeus: 158 kuvapistettä;
  }

  Toinen muunnelma div(
  text-align:center;
  }
  .second-variation img (
  pystysuuntaus: keskellä;
  reunus: 0px kiinteä #3a3838;
  }

  
  Toteutamme kuvista keskitettyjä ja pystysuoria tilannekuvia.

  Kohdistus sijainnin ominaisuuden kanssa

  Tämä on luultavasti tunnetuin menetelmä, mutta yleisimmin käytetty CSS:n kanssa. Mutta tässä meidän on lisättävä, että se ei myöskään ole ihanteellinen ja tällä menetelmällä on myös omat pienet vivahteensa, jotka liittyvät elementin keskustaan, joka, jos se asetetaan prosentteina, se keskitetään elementin vasemmalle puolelle. yläpuolella itse blogin sisällä.

  

  
  

  
  
  
  CSS

  Competaird-vaihtoehto (
  reuna: 2px kiinteä #d40e0e;
  korkeus: 162px;
  asema: suhteellinen;
  }
  .competaird-option div (
  sijainti: absoluuttinen;
  yläosa: 50 %;
  jäljellä: 50 %;
  korkeus: 28%;
  leveys: 49 %;
  marginaali: -2 % 0 0 -25 %;
  reunus: 2px kiinteä #4a4848;
  }

  
  Riviväli tai rivin korkeus on pystysuora korkeus tekstirivien välillä renderoidulla HTML-sivulla. Melkein aina selain tai renderöintikone asettaa tämän etäisyyden arvon sopivaksi. Tämä arvo riippuu yleensä näytettävän sivun fontista ja muista tekijöistä.

  Kohdistus taulukon ominaisuuden kanssa

  Tässä menetelmässä käytetään hyväksi todettua ja vanhaa menetelmää, jossa elementit muunnetaan taulukoksi, jossa solut sijaitsevat. Mitä tulee tagiin nimeltä table, sitä ei käytetä tässä, tässä asetetaan täysin erilaiset CSS-ominaisuudet, tämä on display: table;, display: table-cell;. Jos puhumme IE:n vanhimmista versioista, tietoja ei yksinkertaisesti näytetä täällä. Toivottavasti olet päivittänyt selaimesi, sillä se ei ole enää relevantti ja näyttää melkein kaiken väärin.

  

  Chervert-muunnelma (
  reunus: 2px kiinteä #c30b0b;
  korkeus: 173px;
  näyttö: pöytä;
  leveys: 100 %;
  fonttikoko: 17px;
  fontin paino: lihavoitu;
  väri: #3945a0;
  }

  Chervert-muunnelma div(
  näyttö: taulukko-solu;
  pystysuuntaus: keskellä;
  text-align:center;
  }

  
  Ensinnäkin katsotaan, mikä on oletusarvo, jota useimmat selaimet käyttävät. Useimmissa nykyaikaisissa päiväselaimissa on rivivälit.

  Kohdistus flex-ominaisuuden kanssa

  Tässä tulemme alkuperäisempään versioon, jolla on omat ominaisuutensa, joita harvoin löytyy Internet-resurssin asettelusta. Mutta niitä käytetään edelleen, ja joissain tapauksissa niistä on hyötyä. Tämä määrittää pääakselin, joten suunnattujen flex-elementtien määritelmä sijoitetaan levykesäiliöön.

  

  
  

  Kohdistus flex-ominaisuuden kanssa

  
  
  
  CSS

  Variantti-horisontaalinen (
  reuna: 2px kiinteä #d20c0c;
  korkeus: 147px;
  näyttö: flex;
  kohdista kohteet: keskellä;
  perustele-sisältö: keskus;
  fonttikoko: 18px;
  fontin paino: lihavoitu;
  väri: #49518c;
  }

  
  Voit määrittää rivin korkeuden arvon samalla tavalla kuin minkä tahansa muun koon css:ssä, joko numerona, pikselin kokona tai prosentteina.

  Tasaus muunnosominaisuuden kanssa

  Ja nyt olemme tulleet äärimmäisimpään menetelmään, mutta emme viimeisimpään sovellukseen sen web-suunnittelun käytössä. Kaikki on täällä yksinkertaista, sinun on siirrettävä määritetty elementti pystysuunnassa tarvitsemaasi arvoon. Omaisuus muuttaa, tämä on luettelo muutoksista, joita asennusohjelma käyttää pakettia asentaessaan. Asentaja soveltaa muunnoksia samassa järjestyksessä kuin ne on määritelty ominaisuudessa.

  

  
  

  Tasaus muunnosominaisuuden kanssa

  
  
  
  CSS

  Vertical-medilpasudsa (
  reunus: 2px kiinteä #e00a0a;
  korkeus: 158px;
  fonttikoko: 19px;
  fontin paino: lihavoitu;
  väri: #353c71;
  }
  .vertical-medilpasudsa > div(
  asema: suhteellinen;
  yläosa: 50 %;
  muunnos: translateY(-50%);
  text-align:center;
  }

  
  Kun määrität arvot numeroina, se käyttää pohjana nykyistä fonttikokoa. Nykyinen fonttikoko kerrotaan määrittämälläsi numerolla rivin korkeuden tai rivivälin laskemiseksi.

  Jos haluat keskittää merkit vaakasuunnassa elementissä, käytä text-align: center -toimintoa. Yksi vaihtoehto on, jos haluat keskittää sen pystysuunnassa ja sinulla on kiinteä ylätunnisteen alatunniste ja yksi tekstirivi, aseta rivin korkeus samaksi kuin alatunnisteen korkeus.

  Jos haluat keskittää tekstin elementin, kuten div-, otsikon tai kappaleen, sisällä, voit käyttää tekstin tasaus -ominaisuutta.

  Tekstin tasauksella on useita kelvollisia ominaisuuksia:

  Keskusta: Tekstuuri on keskitetty;
  vasemmalle: Kohdistetaan säiliön vasemmalle puolelle;
  oikein: Kohdennettu säiliön oikealle puolelle
  perustella: Pakotettu kohdistamaan sekä säiliön vasempaan että oikeaan reunaan, uloimpia viivoja lukuun ottamatta;
  perustele kaikki: Saa ääriviivan oikeuttamaan merkit;
  alkaa: Sama kuin vasemmalla, vain jos suunta kulkee vasemmalta oikealle. Mutta se on oikein, jos asetat aluksi tekstin suunnan, joka tapahtuu oikealta vasemmalle;
  Loppu: Alun vastakohta;
  otteluvanhempi: Perinnön tapaan, alkua ja loppua lukuun ottamatta, se lasketaan suhteessa emoelementtiin;

  Käytä näitä ominaisuuksia tasataksesi tekstin ylätason tai rivitysdiv:n sisällä. Jos haluat keskittää tekstin vaakasuunnassa elementissä, käytä text-align: center -toimintoa.

  Yksi vaihtoehto on, jos haluat keskittää sen pystysuunnassa, jos sinulla on kiinteä ylätunnisteen alatunniste ja yksi tekstirivi, aseta rivin korkeus samaksi kuin alatunnisteen korkeus.

  Usein asettelun aikana tarvitaan tekstin pystysuuntaista tasausta lohkossa. Jos tämä on tehtävä taulukon solussa, pystysuoraan kohdistuvan CSS-ominaisuuden arvo asetetaan.

  Mutta herää järkevä kysymys: onko mahdollista tehdä ilman taulukkoa kuormittamatta sivun asettelua tarpeettomilla tunnisteilla? Vastaus on "voit", mutta MSIE-selaimen heikon CSS-tuen vuoksi sen ongelman ratkaisu on erilainen kuin muiden yleisten selainten ratkaisu.

  Harkitse esimerkkinä seuraavaa fragmenttia:

  
  

  
  Jotain tekstiä
  
  
  

  ja yritä kohdistaa teksti pystysuoraan lohkon keskelle ja lohkon alareunaan.

  Ongelman ratkaisu

  "Oikeat" selaimet (mukaan lukien MSIE

  Useimmat nykyaikaiset selaimet tukevat CSS2.1:tä, nimittäin näyttöominaisuuden taulukkosoluarvoa. Tämä antaa meille mahdollisuuden pakottaa tekstilohko näyttämään taulukon soluna ja tätä hyödyntäen kohdistaa teksti pystysuunnassa:

  div(
  näyttö: taulukko-solu;
  pystysuuntaus: keskellä;
  }

  div(
  näyttö: taulukko-solu;
  pystysuuntaus: alhaalla;
  }

  Internet Explorer (versio 7 mukaan lukien)

  Voit ratkaista ongelman kohdistaa teksti lohkon alareunaan MSIE:ssä käyttämällä absoluuttista paikannusta (tässä tarvitsemme lohkoon upotetun merkkijonoelementin):

  div(
  asema: suhteellinen;
  }
  div span(
  näyttö: lohko;
  sijainti: absoluuttinen;
  pohja: 0 %;
  jäljellä: 0 %;
  leveys: 100 %;
  }

  Tämä sääntösarja toimii myös "oikeissa" selaimissa.

  Määritä ominaisuudet

  Div span(
  näyttö: lohko;
  leveys: 100 %;
  }

  eivät ole välttämättömiä, mutta niitä voidaan tarvita, jos aiot käyttää pystysuuntaisen tekstin tasauksen lisäksi myös vaakasuuntaista tasausta, esimerkiksi tekstin tasaus: center ;.

  Tekstin kohdistamiseksi pystysuoraan lohkon keskelle alkuperäisen fragmentin on silti oltava monimutkainen - otamme käyttöön toisen rivielementin:

  Opiskelumateriaali:

  • Pystysuuntainen keskitys CSS:ssä (www.jakpsatweb.cz/css/css-vertical-center-solution.html)
  • Vertikaalinen keskitys CSS:llä (www.student.oulu.fi/%7Elaurirai/www/css/middle/)
  • Tasaus pystysuoraan (www.cssplay.co.uk/ie/valign.html)
  • vertical-align:middle (cssing.org.ua/2005/07/14/vertical-align-middle/)
  • Toinen pystysuuntainen kohdistustapa CSS:ssä (cssing.org.ua/2007/04/26/another-css-valign-method)

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

  Todennäköisesti tiedät jo upean CSS-omaisuuden olemassaolosta pystytasaus. 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 muotoilu: Sinun on keskitettävä muuttuvan korkeuden lohkon sisältö 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:

  Sinä tervetuloa pala teksti!

  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 ja CSS-ominaisuuden pystysuuntaista kohdistusta pystytasaus selviää tästä tehtävästä täydellisesti.

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

  Pystysuuntainen kohdistus div-säiliössä

  Ei ole väliä mitä, käytämme ominaisuutta div-säilön kohdistamiseen pystytasaus. Kuten jo sanoin, tätä ominaisuutta voidaan käyttää rivielementtien kohdistamisessa (keskustelimme tästä tapauksesta yksityiskohtaisesti edellä, eikä se sovi meille div-säiliössä kohdistamiseen); 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-ominaisuus näyttö voit muuttaa div-lohkomme taulukon soluksi, 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 pystysuuntainen kohdistus 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. Pysähdymme siihen 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(ei IE6, IE7, ei IE8 ei tunne tätä ominaisuutta). Siksi käyttämällä ehdollinen kommentti Määritämme muut CSS-ominaisuudet erityisesti IE-perheen selaimille.

  Ehdollinen kommentti

  Rakennustyyppi:

  ... Инструкции, действующие только в случае выполнения условия в квадратных скобках...

  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 toimitettava HTML-koodiimme kaksi lisäsäiliötä. Tekstilohkomme näyttää tältä:

  Tämä on eräänlainen 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 keskelle pystysuoraan nähden kaikissa selaimissa paitsi IE.

  Nyt alamme lisätä kohdistukseen liittyviä ominaisuuksia IE-perheen selaimille(niitä varten 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ä malli 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 sen on oltava 50 prosentissa violetin lohkon korkeudesta. keltaisen lohkon keskellä, ei sen vasenta yläkulmaa.

  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 violettia lohkoa. Hurraa!

  Huijataan vähän

  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:

  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: täytyy lisätä 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 aseta luokkalohkon korkeus textalign prosentteina, sitten sinulla on mikään ei onnistu.

  Keskitys muuttuvan 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 asettanut 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 prosenttiin.

  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, niin se perii 100 %:n korkeuden pää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 .

  CSS:ssä jotkut näennäisesti yksinkertaiset asiat eivät ole niin helppoja tehdä. Yksi näistä asioista on linjaus, ts. kun yksi elementti on sijoitettava tietyllä tavalla suhteessa toiseen.

  Tässä artikkelissa esitellään joitakin valmiita ratkaisuja, jotka auttavat yksinkertaistamaan keskityselementtien työtä vaaka- ja/tai pystysuunnassa.

  Huomautus: Kunkin ratkaisun alla on luettelo selaimista, jotka osoittavat versiot, joissa määritetty CSS-koodi toimii.

  CSS - Center Align Block

  1. Yhden lohkon kohdistaminen toisen keskelle. Tässä tapauksessa ensimmäisellä ja toisella lohkolla on dynaaminen koko.

  ...

  ...

  Vanhempi ( sijainti: suhteellinen; ) .lapsi ( sijainti: absoluuttinen; vasen: 50 %; ylhäällä: 50 %; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%) - ms-muunnos: kääntää (-50%, -50%);

  • Chrome 4.0+
  • Firefox 3.6+
  • Internet Explorer 9+
  • Opera 10.5+
  • Safari 3.1+

  2. Yhden lohkon kohdistaminen toisen keskelle. Tässä tapauksessa toisella lohkolla on kiinteät mitat.

  Vanhempi ( sijainti: suhteellinen; ) .lapsi ( sijainti: absoluuttinen; vasen: 50%; yläosa: 50%; /* 2 lohkon leveys ja korkeus */ leveys: 500 kuvapistettä; korkeus: 250 kuvapistettä; /* Arvot määräytyvät riippuen sen koosta */ /* margin-left = - leveys / 2 */ margin-left: -250px /* margin-top = - korkeus / 2 */ margin-top: -125px )

  Selaimet, jotka tukevat tätä ratkaisua:

  • Chrome 1.0+
  • Firefox 1.0+
  • Internet Explorer 4.0+
  • Opera 7.0+
  • Safari 1.0+

  3. Yhden lohkon kohdistaminen toisen keskelle. Tässä tapauksessa toisen lohkon mitat on määritetty prosentteina.

  Vanhempi ( sijainti: suhteellinen; ) .lapsi ( sijainti: absoluuttinen; /* 2 lohkon leveys ja korkeus % */ korkeus: 50 %; leveys: 50 %; /* Arvot määräytyvät sen koon mukaan prosentteina * / vasen: 25% /* (100% - leveys) / 2 */ ylhäältä: 25% /* (100% - korkeus) / 2 */ )

  Selaimet, jotka tukevat tätä ratkaisua:

  • Chrome 1.0+
  • Firefox 1.0+
  • Internet Explorer 4.0+
  • Opera 7.0+
  • Safari 1.0+

  CSS - Vaakasuora kohdistus

  1. Yhden lohkoelementin (näyttö: lohko) kohdistaminen toiseen (jossa se sijaitsee) vaakasuoraan:

  ...

  ...

  Estä ( marginaali vasen: auto; marginaali oikea: auto; )

  Selaimet, jotka tukevat tätä ratkaisua:

  • Chrome 1.0+
  • Firefox 1.0+
  • Internet Explorer 6.0+
  • Opera 3.5+
  • Safari 1.0+

  2. Viivan (näyttö: inline) tai rivilohkon (näyttö: inline-block) elementin kohdistaminen vaakasuoraan:

  ...

  ...

  Parent ( tekstin tasaus: keskellä; ) .child ( näyttö: inline-block; )

  Selaimet, jotka tukevat tätä ratkaisua:

  • Chrome 1.0+
  • Firefox 3.0+
  • Internet Explorer 8.0+
  • Opera 7.0+
  • Safari 1.0+

  CSS - Pystysuuntainen kohdistus

  1. Keskitä yksi elementti (näyttö: inline, näyttö: inline-block) suhteessa toiseen (jossa se sijaitsee) keskellä. Tämän esimerkin päälohkolla on kiinteä korkeus, joka asetetaan CSS-rivinkorkeusominaisuuden avulla.

  ...

  ...

  Vanhempi ( rivin korkeus: 500 kuvapistettä; ) .lapsi ( näyttö: inline-block; pystytasaus: keskellä; )

  Selaimet, jotka tukevat tätä ratkaisua:

  • Chrome 1.0+
  • Firefox 3.0+
  • Internet Explorer 8.0+
  • Opera 7.0+
  • Safari 1.0+

  2. Keskitä yksi lohko suhteessa toiseen pystysuunnassa esittämällä ylätason taulukkona ja alaosan tämän taulukon soluna.

  Parent ( näyttö: taulukko; ) .child ( näyttö: taulukko-solu; pystytasaus: keskellä; )

  Selaimet, jotka tukevat tätä ratkaisua:

  • Chrome 1.0+
  • Firefox 1.0+
  • Internet Explorer 8.0+
  • Opera 7.5+
  • Safari 1.0+

  Jos tiedät muita mielenkiintoisia temppuja tai hyödyllisiä valmiita kohdistusratkaisuja, jaa ne kommenteissa.