Mitä tietää
- Keskitä teksti käyttämällä seuraavaa koodia ("[/]" tarkoittaa rivinvaihtoa): .center {[/] text-align: center; [/] }.
- Sisältölohkot, joiden koodi on seuraava ("[/]" tarkoittaa rivinvaihtoa): .center {[/] marginaali: automaattinen; [/] leveys: 80em; [/] }.
- Kuvan keskittäminen ("[/]" tarkoittaa rivinvaihtoa): img.center {[/] display: block; [/] vasen marginaali: automaattinen; [/] marginaali-oikea: automaattinen; [/] }.
CSS on paras tapa elementtien keskittämiseen, mutta se voi olla haaste aloitteleville web-suunnittelijoille, koska sen toteuttamiseen on niin monia tapoja. Tässä artikkelissa selitetään, kuinka CSS: ää käytetään tekstin, tekstilohkojen ja kuvien keskittämiseen.
Tekstin keskittäminen CSS: llä
Sinun on tiedettävä vain yksi tyylisivusto tekstin keskittämiseksi sivulle:
.center {
tekstin tasaus: keskellä;
}
Tällä CSS-rivillä kaikki .center-luokassa kirjoitetut kappaleet keskitetään vaakasuoraan emoelementin sisään. Esimerkiksi jaon sisällä oleva kappale (kyseisen jaon lapsi) keskitettäisiin vaakasuoraan osan sisällä.
Tässä on esimerkki tästä luokasta, jota käytetään HTML-dokumentissa:
Tämä teksti on keskitetty.
Kun keskität tekstiä tekstin tasaus -ominaisuudella, muista, että se keskitetään sen sisältävään elementtiin eikä välttämättä keskity koko sivulle.
Luettavuus on aina avain verkkosivuston tekstin suhteen. Suuri keskeytetyn tekstin lohkot voi olla vaikea lukea, joten käytä tätä tyyliä säästeliäästi. Otsikot ja pienet tekstilohkot, kuten artikkelin tiivisteteksti, ovat yleensä helposti luettavissa keskitettynä; Suuremmat tekstilohkot, kuten koko artikkeli, ovat kuitenkin haastavia kuluttaa, jos ne ovat täysin keskitetysti perusteltuja.
Sisältöjen keskittäminen CSS: llä
Sisältö lohkot luodaan HTML: n avulla.
.center {
marginaali: auto;
leveys: 80em;
}
Tämä marginaaliominaisuuden CSS-lyhenne asettaisi ylä- ja alamarginaalin arvoksi 0, kun taas vasen ja oikea käyttävät "automaattista". Tämä vie olennaisesti kaiken käytettävissä olevan tilan ja jakaa sen tasaisesti näkymäikkunan molemmille puolille keskittämällä elementin tehokkaasti sivulle.
Tässä sitä käytetään HTML: ssä:
Tämä koko lohko on keskitetty,mutta sen sisällä oleva teksti on tasattu vasemmalle.
Niin kauan kuin lohkollasi on määritelty leveys, se keskittää itsensä sisältävän elementin sisään. Lohkossa oleva teksti ei keskity siinä, mutta on vasemmalle perusteltu. Tämä johtuu siitä, että teksti on vasemmalla perusteltu oletusarvona verkkoselaimissa. Jos haluat myös tekstin keskitetyn, voit keskittää jaon käyttämällä aiemmin käsiteltyä text-align -ominaisuutta tämän menetelmän yhteydessä.
Kuvien keskittäminen CSS: llä
Vaikka useimmat selaimet näyttävät kuvat keskitettynä samalla tekstin tasausominaisuudella, W3C ei suosittele sitä. Siksi on aina mahdollista, että tulevat selainversiot voivat jättää tämän menetelmän huomiotta.
Sen sijaan, että käyttäisit tekstin tasausta kuvan keskittämiseen, sinun on kerrottava selaimelle nimenomaisesti, että kuva on lohkotason elementti. Tällä tavalla voit keskittää sen kuten muutkin estot. Tässä on CSS, jotta tämä tapahtuu:
img.center {
näyttö: lohko;
marginaali vasemmalla: auto;
marginaali-oikea: auto;
}
Ja tässä on kuvan keskittämisen HTML:
Voit myös keskittää objekteja sisäisen CSS: n avulla (katso alla), mutta tätä lähestymistapaa ei suositella, koska se lisää visuaalisia tyylejä HTML-merkintöihisi. Muista, että tyylin ja rakenteen tulisi olla erilliset; CSS-tyylien lisääminen HTML-koodiin rikkoo erottamisen, ja sitä on vältettävä aina kun mahdollista.
Elementtien keskittäminen pystysuunnassa CSS: llä
Kohteiden keskittäminen pystysuoraan on aina ollut haastavaa web-suunnittelussa, mutta CSS: n joustava laatikkomoduuli CSS3 tarjoaa tavan tehdä se.
Pystysuuntainen suuntaus toimii samalla tavalla kuin edellä mainittu vaakasuuntainen suuntaus. CSS-ominaisuus on pystysuuntainen, kuten näin:
.vcenter {
pystysuunnassa: keskellä;
}
Kaikki modernit selaimet tukea tätä CSS-tyyliä. Jos sinulla on ongelmia vanhempien selainten kanssa, W3C suosittelee tekstin keskittämistä pystysuoraan säilöön. Sitä varten aseta elementit sisältävän elementin sisään, kuten a divja aseta siihen vähimmäiskorkeus. Ilmoita sisältävä elementti taulukon soluna ja aseta pystysuuntainen suuntaus keskelle.
Esimerkiksi tässä on CSS:
.vcenter {
min-korkeus: 12em;
näyttö: taulukon solu;
pystysuunnassa: keskellä;
}
Ja tässä on HTML:
Tämä teksti on keskitetty pystysuunnassa ruutuun.
Älä käytä HTML-elementtiä keskittämään kuvia ja tekstiä. se on vanhentunut, ja modernit verkkoselaimet eivät enää tue sitä. Tämä on suurelta osin vastaus HTML5: n selkeään rakenteen ja tyylin erottamiseen: HTML luo rakenteen ja CSS sanelee tyylin. Koska keskitys on elementin visuaalinen ominaisuus (miltä se näyttää pikemminkin kuin miltä se on), kyseinen tyyli hoidetaan CSS: llä, ei HTML: llä. Käytä sen sijaan CSS: ää, jotta sivusi näkyvät oikein ja noudattavat nykyaikaisia standardeja.
Internet Explorerin pystysuuntainen keskitys ja vanhemmat versiot
Voit pakottaa Internet Explorerin (IE) keskittämään ja käyttämään ehdollisia kommentteja siten, että vain IE näkee tyylit, mutta ne ovat hieman yksityiskohtaisia ja houkuttelevia. Microsoftin vuoden 2015 päätös luopua tuesta vanhemmat versiot IE: stäkuitenkin tekee tästä ei-ongelman, koska IE lakkaa käytöstä.