Posisjonering

Hva

Et stadig tilbakevendende problem er hvordan vi skal posisjonere elementer inne i et annet element dersom vi vil ha en annen løsning enn den standardiserte flyten. Vi skal se på noen enkle muligheter i denne modulen.

La oss anta at vi ønsker å plassere et bilde vertikalt sentrert inne i et element. Bildet er mindre enn det omgivende elementet.

Dersom vi ikke gjør noe spesielt, ikke noe CSS, får vi følgende

<div id="parent">
	<div id="child"><img src="bs2.png" alt="x"/></div>
</div>

Vertikal sentrering

Vi ser på noen måter å kontrollere posisjoneringen med CSS

display:table

#parent2{
    width:100px;height:150px;
    border-style:solid;border-width:thin;
    display:table
}
#child2{
    display:table-cell;
    vertical-align:middle
}

translateY

#parent3{
    width:100px;height:150px;
    border-style:solid;border-width:thin;
}
#child3{
  transform: translateY(50%);
 -webkit-transform: translateY(50%);
  -ms-transform: translateY(50%);
}

display:flex

(Safari ok ?)

#parent4{
    width:100px;height:150px;
    border-style:solid;border-width:thin;
    
    display: flex;    
    flex-direction: column;
    justify-content: center;
    
    /*safari*/
    display: -webkit-flex;    
    -webkit-flex-direction: column;
    -webkit-justify-content: center;
}
#child4{
}

Sentrering horisontalt og vertikalt

#parent5{
    width:200px;height:200px;
    border-style:solid;border-width:thin;
    
    display: flex;
    justify-content: center;
    
    /*safari*/
    display: -webkit-flex;    
    -webkit-justify-content: center;    
}
#child5{
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    /*safdari*/
    display: -webkit-flex;
    -webkit-flex-direction: column;
    -webkit-justify-content: center;
}

Mer om flex i modulen FlexBox