Nettivujen kanssa vääntäminen jatkuu...
Nyt seuraavan ihmetyksen aihe on kuvan keskittäminen. Onnistun keskittämään kuvan joka on esim. 800px leveä seuraavalla koodilla :
#mainos {
margin-left: 0;
margin-right: 0;
text-align: center;
}Jos taas laitan sivulle kuvan joka on esim 2400px leveä, ei kuva enää keskitykkään vaan on vasemmassa laidassa.
Mikä tämän aiheuttaa?
#mainos {
margin-left: auto;
margin-right: auto;
}Ei toimi tuollakaan....
jos kuva on noin leveä, voiko se edes keskittyä? Jotta kuva voisi keskittyä, pitää sen ensin mahtua kokonaisuudessaan näytölle.
Tässä tapauksessa näytön resoluution / selaimen ikkunan pitäisi olla + 2400px leveyssuunnassa. Mikäli sivuston sisältö ylittää resoluution/selaimen ikkunan rajat leveyssuunnassa, ilmaantuu sivun alalaitaan horisontaalinen scrollbar.
Huomioithan, että yhden kuvan tulisi sisältää mahdollisimman vähän sisältöä:
jsfiddlessä käytin esimerkkinä yhtä kuvaa sivustoltasi. Kyseinen kuva tulisikin muokata siten, että logo ja facebook ovat erillisinä kuvina, ja asemoida erikseen toinen vasempaan, ja toinen oikeaan reunaan.
Kun ko. kuvaa lähdetään skaalaamaan näyttöön sopivaksi, tulee kuvaa pienentää aina suhteessa kuvan korkeuteen/leveyteen (aspect ratio), jotta kuva säilyttää alkuperäiset mittasuhteensa. Näin ollen jos käytetään leveitä bannerikuvia, eivät ne skaalaudu kuin tietyntyyppisille näytöille, ilman että kuva menee joko liian pieneksi jotta siitä saisi enää vastaavaa hyötyä, tai joudutaan rikkomaan aspect ratio, jolloin kuva vääristyy alkuperäisestä (menee ns. lyttyyn joko sivu tai pystysuunnassa)
Hyviä huomioita, kiitoksia.
groovyb, tietenkin kuvan voi keskittää, vaikka se ei mahtuisi kokonaan ruudulle. Silloin ulkopuolelle jää yhtä paljon molemmista reunoista (sen sijaan, että jäisi vain toisesta reunasta). Tätä käytetäänkin melko paljon taustakuvien ja bannereiden kanssa.
Taustakuvia varten on omat CSS-määreensä, joilla keskittäminen onnistuu helposti ja kuvan saa vielä skaalattuakin. Tavalliset kuvat vaativat pientä kikkailua. Yksi tapa on laittaa ympärille inline-block, jonka vasen reuna asettuu keskelle (margin-left: 50%), ja siirtää sitten kuvaa puolet omasta leveydestään vasemmalle (left: -50%).
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Kuvan keskittäminen</title>
<style>
p {
text-align: center;
}
.centered-image-block {
display: block;
overflow: hidden;
}
.centered-image-block span {
display: inline-block;
margin-left: 50%;
}
.centered-image-block img {
position: relative;
left: -50%;
content: url('data:image/gif;base64,R0lGODdhIAABAIQgAEdHR0pKSk5a/3Fxcf9LS/9OTmp1/4mJif9xcYCJ/5GRkf94eP98fKamp5yj/52k/qar7a+vr7Gxsa2z/6+1/7q6uru7u7y9y7m+/8TExPO5uem9vcrKyv69vfLIyOXX1ywAAAAAIAABAAAFGmBBLAjTaZv3ZVbFHUAwKJHUXNCDJdTkGIIQADs=');
}
</style>
<p>Pieni kuva</p>
<div class="centered-image-block"><span><img style="width: 256px; height: 32px;"></span></div>
<p>Keskikokoinen kuva</p>
<div class="centered-image-block"><span><img style="width: 1200px; height: 32px;"></span></div>
<p>Suuri kuva</p>
<div class="centered-image-block"><span><img style="width: 3200px; height: 32px;"></span></div>Niin, puhut croppaamisesta. Koko kuvahan tuossa ei keskity, koska "leikatut" osat jää ulkopuolelle, vaikkakin tasapuolisesti. Koko kuvaa et pysty keskittämään mittoja muuttamatta, jos se ylittää sille varatun tilansa.
Keskittämisellä yleisesti ymmärtää tilanne, jossa keskenään keskitettävien asioiden keskipisteet asetetaan samaan kohtaan. Tällöin ei ole merkitystä sillä onko kuva isompi kuin ruutu vai toisinpäin. Eli ihan aiheetonta pilkun nussimista nyt groovyb:llä. Ihmisten pitäisi ymmärtää mistä puhutaan vaikka koneilta se ei onnistuisikaan.
Joo, jos haluat kesittää taustaa suuremman kuvan niin teknisesti siitä näytetään silloin vain osa keskeltä eli kuva leikkautuu.
CSS:llä voi keskittää elementtejä horisontaalisesti monellakin tapaa.
Helpoin tapa keskittää on käyttää flexbox ominaisuutta, missä elementtejen sijoittelu määritellään parent elementissä.
Selainten tukikin alkaa olemaan suht hyvää lukuunottamatta IE:tä. (ylläri!=?)
display:flex
#parent-mainos {
display: flex;
justify-content: center; // X akselilla
align-items: center; // Y akselilla
}
#mainos {// ei välttämätöntä määritellä}display: block ja x-akselin marginit autolle
#mainos {
display: block;
width: 800px;
margin-left: auto; // Sama kuin
margin-right: auto; // margin: 0 auto;
}Sama kuin Metabolixin versio sillä erolla 'margin-left: 50%' -> transform: translateX(-50%) eikä tarvitse luoda ylimääräistä span elementtiä
#mainos {
display: block;
position: relative; // tai absolute
left: 50%;
width: 800px;
transform: translateX(-50%);
}Yleisesti ottaen horisontaalisesti sijoitettavalla elementillä tulee olla 2 ominaisuutta
- 'display' tulee olla 'block'
- 'width' tulee olla määritelty jotta selain voi laskea marginit sun muut.
Aihe on jo aika vanha, joten et voi enää vastata siihen.