Keskitä kuvia, tekstiä ja estetietoja verkkosivustojen rakentamisessa
Jos olet oppinut rakentamaan verkkosivustoja , yksi yleisimmistä temppuista, joita sinun on hallittava, on keskittää kohteet selainikkunaan. Tämä voi tarkoittaa sivun keskittämistä sivulle tai se voisi olla keskustan perustelu tekstiä kuten otsikoita osana suunnittelua.
Oikea tapa saada aikaan keskitettyjen kuvien tai tekstin tai jopa koko verkkosivun visuaalinen ulkoasu on CSS-tyylitiedostoilla (CSS) . Suurin osa keskittymisen ominaisuuksista on ollut CSS: ssä versiosta 1.0, ja ne toimivat hyvin CSS3: n ja nykyaikaisten selainten kanssa .
Kuten monien web-suunnittelun osa-alueita, on olemassa useita tapoja käyttää CSS: ää keskelle elementtejä verkkosivulla. Katsotaanpa muutamia tapoja käyttää CSS: tä tämän visuaalisen ilmeen saavuttamiseksi.
Yleiskatsaus CSS: n käyttämiseen HTML-elementteihin
Keskittyminen CSS: ään voi olla haaste web-suunnittelijoiden alulle, koska on olemassa niin monta eri tapaa saavuttaa tämä yksi visuaalinen tyyli. Vaikka erilaiset menetelmät voivat olla mukavia tai kokeneita web-kehittäjiä, jotka tietävät, että kaikki tekniikat eivät toimi kaikissa elementeissä, tämä voi olla haasteellinen uudemmille web-ammattilaisille, koska monenlaiset menetelmät edellyttävät, että heidän on tiedettävä, milloin käyttää tätä lähestymistapaa. Parasta on saada käsitys muutamasta lähestymistavasta. Kun alat käyttää niitä, opit, mikä menetelmä toimii parhaiten missä tapauksissa.
Korkealla tasolla voit käyttää CSS: a:
- Keskusteksti
- Keskitä lohkotason elementti (kuten jako)
- Keskitä kuva
- Keskitä lohko tai kuva pystysuoraan
Monet (monta) vuotta sitten web-suunnittelijat voisivat käyttää
Keskitetty teksti CSS: llä
Helpoin asia keskittää verkkosivu on teksti. Tähän on vain yksi tyyliominaisuus, jota sinun tarvitsee tietää: teksti-align. Ota CSS-tyyli alla esimerkiksi:
p.center {text-align: center; }
Tämän CSS-rivin avulla jokainen keskiluokkaan kirjoitettu kappale keskitetyisi vaakasuoraan sen emoelementin sisällä. Esimerkiksi jos kappale oli divisioonan sisällä, eli se oli divisioonan lapsi, se olisi keskitetty vaakasuoraan
Tässä esimerkki tästä luokasta on HTML-dokumentissa:
Tämä teksti on keskitetty.
Kun keskität tekstiä tekstin kohdistusominaisuutena, muista, että se keskittyy sen sisältävään elementtiin, eikä välttämättä keskity koko sivun itse. Muista myös, että keskitetyn tekstin voi olla vaikea lukea suurille sisällönosille, joten käytä tätä tyyliä säästeliäästi. Otsikot ja pienet tekstiryhmät, kuten artikkelin tai muun sisällön teaser-tekstiä, ovat usein helppolukuisia ja hienoja keskittyneinä, mutta suuremmat tekstiryhmät, kuten koko artikkeli, ovat haastavia kuluttaa, jos sisältö on täysin keskitetty oikeutettu. Muista, että luettavuus on aina avain verkkosivustekstiin!
CSS-sisällön keskittäminen
Lohkot ovat sivuillasi olevia elementtejä, joilla on määritelty leveys ja jotka on määritetty lohkotason elementiksi. Usein nämä lohkot luodaan käyttämällä HTML
div.center {
marginaali: 0 auto;
leveys: 80em;
}
Tämä CSS-lyhennelmä marginaaliominaisuudelle asettaisi ylä- ja alamarginaalit arvoon 0, kun taas vasen ja oikea käyttää "automaattista". Tämä vie olennaisesti kaikki käytettävissä olevat tilat ja jakaa ne tasaisesti näkymäikkunan kahden puolen väliin, tehokkaasti keskittää elementti sivulle.
Täällä sitä sovelletaan HTML: ssä:
mutta sen sisällä oleva teksti on vasemmalla.
Niin kauan kuin lohkosi on määritelty leveys, se keskittyy sisältämään elementtiin. Tähän lohkoon sisältyvä teksti ei ole keskittynyt siihen, mutta se on perusteltua. Tämä johtuu siitä, että tekstissä on oletusarvoisesti perusteltu selaimissa. Jos haluat myös tekstin keskittyvän, voit käyttää tekstin kohdistusominaisuutta, jota aiemmin käsiteltiin tämän menetelmän avulla keskittämään jako.
Keskittämällä kuvia CSS: llä
Vaikka useimmat selaimet näyttävät kuvia keskitetysti käyttäen samaa tekstin kohdistusominaisuutta, jota olemme jo tarkastelleet kappaleen kohdalla, ei ole hyvä ajatus vedota tähän tekniikkaan, koska W3C ei suosittele sitä. Koska sitä ei suositella, on aina mahdollista, että selainten tulevat versiot voisivat sivuuttaa tämän menetelmän.
Sen sijaan, että käytät tekstisäännöstä kuvan keskittämiseen, sinun on ilmaista selkeästi selain, että kuva on lohkotason elementti. Tällä tavoin voit keskittää sen samalla tavalla kuin mikä tahansa muu lohko. Tässä on CSS, jotta tämä tapahtuisi:
img.center {
näyttö: lohko;
marginaali-vasen: auto;
marginaali-oikea: auto;
}
Ja tässä on HTML, jonka kuvasta haluamme keskittyä:
Voit myös keskittää objektit käyttämällä in-line CSS: ää (katso alla), mutta tätä lähestymistapaa ei suositella, koska se lisää visuaalisia tyylejä HTML-merkintään. Muista, että haluamme erottaa tyylin ja rakenteen, joten lisäämällä HTML-koodisi CSS-tyylit ja katkaisemalla tämä erottaminen ja sellaisenaan vältettävä aina, kun se on mahdollista.
Keskityselementit vertikaalisesti CSS: n avulla
Keskityskohteet pystysuoraan ovat aina olleet haasteellisia web-suunnittelussa, mutta CSS: n CSS Flexible Box Layout Modulin vapauttaminen CSS3: ssa on nyt tapa tehdä se.
Pystysuuntainen linjaus toimii samoin kuin edellä kuvattu horisontaalinen kohdistus. CSS-ominaisuus on vertikaalinen, keskellä oleva keskiarvo.
.vcenter {
pystysuorat: keskellä;
}
Tämän lähestymistavan haittapuolena on se, että kaikki selaimet eivät tue CSS FlexBoxia, vaikka tämän uuden CSS-asettelutavan lisäämme yhä enemmän. Itse asiassa kaikki nykyaikaiset selaimet tukevat tätä CSS-tyyliä. Tämä tarkoittaa, että ainoa huolesi Flexboxin kanssa olisi paljon vanhempi selainversio.
Jos sinulla on ongelmia vanhempien selainten kanssa, W3C suosittelee, että keskit tekstin pystysuoraan säiliöön seuraavalla tavalla:
- Aseta elementit, jotka on keskitettävä sisältämään elementtiin, kuten div.
- Aseta vähimmäiskorkeus elementtiin.
- Ilmoita, että elementti sisältää taulukon solun.
- Aseta pystysuora kohdistus keskelle.
Esimerkiksi tässä on CSS:
.vcenter {
min-korkeus: 12m;
näyttö: taulukko-solu;
pystysuorat: keskellä;
}
Ja tässä on HTML:
Tämä teksti on pystysuoraan keskitettynä ruutuun.
Internet Explorerin pystysuuntainen keskitys ja vanhemmat versiot
On olemassa joitakin keinoja pakottaa Internet Explorer (IE) keskittää ja käyttää ehdollisia kommentteja niin, että vain IE näkee tyylit, mutta ne ovat hieman verbaalisia ja ruma. Hyvä uutinen on se, että Microsoftin äskettäin tekemä päätös poistaa vanhempien IE-versioiden tukemisen. Selaimet, jotka eivät tue selaimia, pitäisi olla poissa pian. Näin web-suunnittelijat voivat helpommin käyttää nykyaikaisia ulkoasumenetelmiä kuten CSS FlexBox, joka tekee kaiken CSS-asettelun, ei vain keskittäminen, helpompi kaikille web-suunnittelijoille.