Dec

8

Elementin keskitys CSS:llä

Filed Under Web standards 

CSSMoni taulukkotaitosta CSS:ään siirtyvä on pulassa divien sijoittamisen kanssa. Yksi yleisimmistä pulmista CSS-taitossa on leiskan/elementin keskitys. Muutamia tapoja löytyy asian ratkaisemiseksi, kuten negatiivinen marginaali. Käytän sitä itse töissäni, joten esittelen sen tässä. Ja vielä väärinkäsitysten välttämiseksi on syytä mainita, että kyse ei ole millään muotoa omasta innovaatiosta, vaan “tekniikka” on jo kauan sitten esitelty ainakin Bluerobotin sivuilla.

Eli homma toimii näin. Elementin vasen reuna keskiteään sivulle.

position:absolute;
left:50%;

Sen jälkeen asetetaan elementille negatiivinen vasen marginaali, joka on puolet elementin leveydestä (oletetaan, että leveys on 400px).

margin-left:-200px;

Eli lopputulos voisi näyttää tältä:

#element{
	position:absolute;
	left:50%;
	width:400px;
	margin-left:-200px;
	}
Share

Comments

7 comments to “Elementin keskitys CSS:llä”

  1. AlluNo Gravatar on January 19th, 2006 5:10 PM

    Hmm.. eikös tämän saman homman saa hoidettua myös näin:

    #element {
    margin: 0 auto;
    }

    ;)

  2. Timo VirtanenNo Gravatar on January 19th, 2006 6:52 PM

    Kyllä saa

    Kyseinen metodi ei kuitenkaan toimi IE5WIN:ssä suoraan ,vaan body-tagiin pitää lisätä seuraava:

    body {
    text-align:center; /* IE5WIN */
    }

    Itse olen keskittänyt tarvittavat elementit negatiivista marginaalia käyttämällä, koska mielestäni metodi on johdonmukainen, mutta jokainen tehköön sen parhaaksi katsomallaan tavalla. :)

  3. MiikaNo Gravatar on April 30th, 2006 7:50 PM

    Minulla ainakin ilmeni sellainen ongelma, että kun keskitin leiskani kasassa pitävän päädivin tuolla tavalla, niin sen jälkeenpä ei enään pystynyt laittamaan pohjamarginaalia tuolle elementille.. Vai pystyisikö sen jotenkin?

    Siispä tyydyn margin: 0 autoon jatkossakin

  4. tapeNo Gravatar on January 1st, 2007 3:13 PM

    margin-left: auto;

    /* Ulkoasun keskitys sivun keskelle, KS. seuraava kappale */

    margin-right: auto;

    /* Ulkoasun keskitys sivun keskelle, KS. seuraava kappale */
    tuollain minä olen ekskittänyhmm

  5. JohannesNo Gravatar on March 5th, 2007 7:33 PM

    Joo tää toimii hyvin, olisin pulassa ilman tätä, kiits Timppa ;)

  6. LauraNo Gravatar on February 5th, 2008 9:58 PM

    Kiitos kovasti. Erittäin hyödyllinen vinkki ;)

  7. LaNuNo Gravatar on March 11th, 2008 6:08 PM

    Tuo temppu sisältää riskin, että siirretään osa elementistä selainikkunan ulkopuolelle. Jos sivun on tarkoitus toimia pienillä resoluutioilla (puhelimet yms.) ei kannata käyttää.

Leave a comment