Centrere indhold i en div både horisontalt og vertikalt

Her er måden ... men hvis billedet skal kunne skiftes til forskellige str. skal man
gøre det via. et javascript istedet - samtidig med at man skifter billedet ...



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type"

content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">

#en_div_der_skal_vaere_baggrund{
  background:#00f;
  position:relative;
  height:200px;
  width:300px;
}

#skal_vaere_et_billede_men_for_illustrering_en_div{
  background:#0ff;
  position:absolute;
  height:100px;
  width:150px;
  left:50%;
  top:50%;
  margin-left:-75px;
  margin-top:-50px;
}

</style>

</head><body>

<div id="en_div_der_skal_vaere_baggrund">
<div id="skal_vaere_et_billede_men_for_illustrering_en_div"></div>
</div>

</body></html>

Et eksempel:



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">

#cdiv{
  background:#00f;
  position:relative;
  height:300px;
  width:350px;
}

#cbil{
  background:#0ff;
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-145px;
  margin-top:-109px;
}

</style>

<script type="text/javascript">

var cbil;
window.onload=function(){
  cbil=document.getElementById("cbil");
  cbil.onload=function(){calign();};
}

function cpic(tmpp){
  cbil.src=tmpp;
}

function calign(){
  cbil.style.marginLeft=(cbil.offsetWidth/2*-1)+"px";
  cbil.style.marginTop=(cbil.offsetHeight/2*-1)+"px";
}
</script>

</head><body>
Baseret på start billede cbil er 290x218 px derfor halvdelen i negativ padding på begge top og left i margin
<div id="cdiv"><img src="b1.jpg" id="cbil"></div>

<b onclick="cpic('b1.jpg');">Skift billedet til b1.jpg</b><br>
<b onclick="cpic('./b2.jpg');">Skift billedet til b2.jpg - f.eks. 150 x 100px</b>

</body></html>



... hjalp det ?

eksempel med en tabel istedet:



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">

#ctab{
  background:#00f;
  border-collapse:collapse;
  height:300px;
  width:350px;
  text-align:center;
}

</style>

<script type="text/javascript">
function cpic(tmpp){document.getElementById("cbil").src=tmpp;}
</script>

</head><body>

<table id="ctab"><tr><td><img src="b1.jpg" id="cbil"></td></tr></table>

<b onclick="cpic('b1.jpg');">Skift billedet til b1.jpg</b><br>
<b onclick="cpic('./b2.jpg');">Skift billedet til b2.jpg - f.eks. 150 x 100px</b>

</body></html>

i dag ligger billedet i en div. eksempelvis: <div id="product_image"><img src="img/shop/<%=rsSpecific("ImageName")%>" alt="<%=rsSpecific("Name")%>" <%=ImageResize(server.mappath("img/shop") &"/" & rsSpecific("ImageName"), 385, 345)%>></div>

hvilken løsning af ovenstående vil du så anbefale ?

på denne side vil jeg eksempelvis gerne smide det store billede i midten af den blå ramme og de små billeder i midten af deres ramme: http://www.because-test.dk/product.asp?IDproduct=24

Billederne mangler?
Jeg vil nok nærmest anbefale den i 01/08-2006 09:24:25 ... tabeller er
lige en tand bedre til at centrere end div elementer med negative margin'er...
- De små billeder bør sættes ind i en td hvor de ikke får tildelt valign="top" - og så måske text-align:center; på hver af td'erne...

( det store billede står vist fint nu ...
jeg ville selv bruge 01/08-2006 09:24:25 - hvis billeder skulle kunne skiftes dynamisk med en automatisk centrering ... det eneste javascriptet gør i det indlæg er at skifte src ... )

point...

Ok :)

Og tak for point :)