sentrere etter border uavhengig av høyde & lengde

[bork93]

Jeg har fulgt en tutorial på det å lage en thumbnail viewer/image gallery. Problemet er bare det at alle bildene ligger inne i en border som er yy i høyde og xx i bredde.

 

Hvordan midtstiller jeg bildene inne i borderen?

[torbjørn marø]

Det hjelper om du inkluderer litt av markupen, så vi kan si hva du skal modifisere.

[bork93]

Beklager, sløvt av meg.

 

Bildefilen ligger i en id div:

 

<div id="photo_2" style="display:none;"><img src="Bilde.jpg" height="100%" alt="Red" /></div>

 

CSS'en til bildefilen(e)

 

.photos ul.thumbs li{

width: 110px;

height: 100px;

margin: 0 10px 0 0;

padding: 0;

float: left;

overflow: hidden;

position: relative;

border: 5px solid #ddd;

text-align: center;

}

 

 

Bildet(ene) ligger i borderen (rammen). De er også et javascript med her, men jeg tenkte kanskje det ikke var nødvendig å se på det. Hvordan får jeg sentrert bildene inne i en ramme som har forhåndssatt width og height?

[bork93]

Sender scriptet likevel;

 

<script type="text/javascript">

//change the opacity for different browsers

function changeOpac(opacity, id) {

var object = document.getElementById(id).style;

object.opacity = (opacity / 100);

object.MozOpacity = (opacity / 100);

object.KhtmlOpacity = (opacity / 100);

object.filter = "alpha(opacity=" + opacity + ")";

}

function switch_product_img(divName, totalImgs) {

for (var i=1; i<=totalImgs; i++) {

var showDivName = 'photo_' + i;

var showObj = document.getElementById(showDivName);

if (showDivName == divName)

showObj.style.display = 'block';

else

showObj.style.display = 'none';

}

}

</script>

[Diablonor]

Beklager, sløvt av meg.

 

Bildefilen ligger i en id div:

 

<div id="photo_2" style="display:none;"><img src="Bilde.jpg" height="100%" alt="Red" /></div>

 

CSS'en til bildefilen(e)

 

.photos ul.thumbs li{

width: 110px;

height: 100px;

margin: 0 10px 0 0;

padding: 0;

float: left;

overflow: hidden;

position: relative;

border: 5px solid #ddd;

text-align: center;

}

 

 

Bildet(ene) ligger i borderen (rammen). De er også et javascript med her, men jeg tenkte kanskje det ikke var nødvendig å se på det. Hvordan får jeg sentrert bildene inne i en ramme som har forhåndssatt width og height?

 

Hmm, i css'en peker du mot en <li>, mens HTML du har limt inn, er en <div>. Om jeg ikke tar helt feil har de ingenting med hverandre å gjøre? Skriv gjerne mer av koden din her (HTML).

 

forskjellige måter å midtstille ting på gjennom css er:

 

margin: auto;

 

text-align: center;

 

Så om det er snakk om at <div> er din "ramme" så vil det bli:

 

div.photo_2 {

text-align: center;

}

 

om det er en <li> som holder på <div>, så blir det:

 

div.photo_2 {

margin: auto;

}

 

Såvidt jeg kan forstå uten mer av koden Kan jo teste