Bjørn Enki professional website design offers custom website design services internationally, with a focus on Los Angeles website design.

Please note: This page is a norwegian translation of the World Wide Web Consortium's page on "CSS tips & triks: centering things". This translation was written by Bjorn Enki, and may contain translation errors. For the original english version, please visit http://www.w3.org/Style/Examples/007/center.

Vennligst bemerk: Dette er en norsk oversettelse av "CSS tips & triks: sentrering av ting" siden av the Word Wide Web Consortium. Denne oversettelsen er skrevet av Bjorn Enki, og inneholder muligens feiloversettinger. For den originale og oppdaterte versjonen (på engelsk), vennligst se http://www.w3.org/Style/Examples/007/center.

Web Stilark
CSS tips & triks

(Denne siden bruker CSS stilark)

Linjer

Block Element

Vertikal

Demo

Sentrering av ting

En vanlig oppgave for CSS er å sentrere tekst eller bilder. Det finnes faktisk tre typer sentrering:

Sentrering av linjer med tekst

Den mest vanlige og (derfor) letteste typen sentrering er linjer med tekst i en avsnittet eller tittel. CSS har egenskapen 'text-align' til dette:


P { text-align: center }
H2 { text-align: center }

gjør det slik at hver linje i et P eller i et H2 element blir sentrert mellom elementet sine marginer, slik som dette:

Linjene i dette avsnittet er alle sentrert mellom avsnittet sine marginer, takket været verdien 'center' til CSS egenskapen 'text-align'.

Sentrering av block element eller et bilde

Det hender at det ikke er teksten som må sentreres, men hele block elementet. Eller, for å si det på en annen måte: vi vil at left (venstre) og right (høyre) marginene skal være like. Dette gjøres med å sette marginene til 'auto'. Dette blir vanligvis brukt med et block element med fiksert vidde, fordi om selve block elementet er fleksibelt, tar det bare opp all plassen som er tilgjengelig. Her er et eksempel:

P.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 6em
}
...
<P class="blocktext">Denne smale...

Denne smale blocken med tekst er sentrert. Legg merke til at linjene inni blocken ikke er sentret (de ligger til venstre av blocken med 'left-align'), i motsetning til i det tidligere eksempelet.

Dette er også måten man sentrerer et bilde på: gjør det om til sitt eget block element og tilføye margin egenskapene. For eksempel:

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }
...
<IMG class="displayed" src="..." alt="...">

Bildet er nå sentrert: some random image

Vertikal Sentrering

CSS level 2 har ingen egenskap for vertikal sentrering. Det kommer nok til å være en i CSS level 3. Men til og med i CSS2 kan man sentrere block element vertikalt, med å kombinere et par egenskaper. Trikset er å spesifisere at den ytre blocken skal formateres som en tabellcelle, fordi innholdet til en tabellcelle kan sentreres vertikalt.

Eksemplet nedenfor sentrerer et avsnitt i et block element som har en viss høyde spesifisert. Et annet eksempel viser et avsnitt som er sentrert vertikalt i nettleseren, fordi det ligger inni et block element som har 'absolute' posisjon og er så høy som vinduet til nettleseren.

DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
...
<DIV class="container">
  <P>Dette lille avsnittet...
</DIV>

Dette lille avsnittet er sentrert vertikalt.

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
created 5 May 2001;
last updated $Date: 2009/04/04 16:23:10 $ GMT