Se andate a questo indirizzo:
http://www.siatec.net/andrea/archivi...ze/natura.html

vedete che c'è una galleria delle immagini che usa il lightbox, le miniature vorrei fossero correttamente centrate all'interno della sezione content del mio sito ma non ci riesco, come mai?

Il codice HTML della pagina è:

codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="_your description goes here_" />
<meta name="keywords" content="_your,keywords,goes,here_" />
<meta name="author" content="Andrea Nobili http://www.siatec.net/andrea/fotografia/" />
<link rel="stylesheet" type="text/css" href="default.css" media="screen" title="Esempio Sito Case Vacanze" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

<title>Esempio Sito Case Vacanze</title>

<script type="text/javascript" src="lightbox/js/prototype.js"></script>
<script type="text/javascript" src="lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lightbox/js/lightbox.js"></script>
</head>

<body><div id="wrap">

<div id="header"></div>

<div id="avmenu">
<h2 class="hide">Menu:</h2>
<ul>[*]Home[*]I luoghi e la natura[*]Sciacca Terme[*]Come Raggiungerci[*]I nostri Trilocali[*]Affitto Villetta[*]Contatti[/list]

<div class="announce">
  

<span class="bold">Città:</span> Sciacca Terme</p>
  

<span class="bold">Stato:</span> Italia</p>
  

<span class="bold">Regione:</span> Sicilia</p>
  

<span class="bold">Nome abitanti:</span> Saccensi</p>
  

<span class="bold">Santo patrono:</span> Maria SS. del Soccorso</p>
  

<span class="bold">Giorno festivo:</span> 2 Febbraio</p>
  

<span class="bold">Prodotti tipici:</span> Olio, Vino, Prodotti ittici conservieri, Ceramica artistica</p>
</div>

<div class="announce">
<h3>Ultime Notizie:</h3>


Gennaio 15, 2007:

NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS NEWS.</p>
<p class="textright">Leggi il resto...</p>
</div>

</div>

<div id="extras">
<h3>Altre info:</h3>


Potete contattarci telefonicamente al seguente numero: 000111222333</p>

<h3>Links utili:</h3>


- Wiki Sciacca

- Ristoranti

- Discoteche

- Diving Center

</p>

  


    
  </p>

</div>

<div id="content">
<h2 class="testo">Sciacca e la sua natura:</h2>
<p class="testo">In questa sezione del sito potete vedere le bellezze della natura della zona intorno a Sciacca dove effettuare gite ed escursioni, mi raccomando n on scordate a casa maschera e boccaglio ;-)</p>

<div id="gal">

<p class="galleria_light">
    [img]img/fotosciacca/sciaccamare1.jpg[/img]

  [img]img/fotosciacca/marelumia.jpg[/img]
</p>

<p class="galleria_light">
    [img]img/fotosciacca/marelumia2.jpg[/img]
  
    [img]img/fotosciacca/borgobonsignore.jpg[/img]
</p>

<p class="galleria_light">
  
    [img]img/fotosciacca/borgobonsignore2.jpg[/img]
  
    [img]img/fotosciacca/lacastella.jpg[/img]
</p>

</div>

</div>

<div id="footer">
Copyright &copy; 2007 Andrea Nobili WebMaster. Design by Andrea Nobili.
</div>

</div>
</body>
</html>
Mentre il codice CSS (in larga parte sovrabbondante credo che dovete vedere solo le ultime righe ma lo metto cmq tutto non si sa mai) è:

codice:
/* andreas01 - an open source xhtml/css website layout by Andreas Viklund (http://andreasviklund.com). Made for OSWD.org, free to use as-is for any purpose as long as the proper credits are given for the original design work. For design assistance and support, contact me through my website or through http://oswd.org/email.phtml?user=Andreas

Version: 1.0
(July 25, 2005)

Screen layout: */

body {
margin: 0 auto;
padding: 0;
font: 76% Verdana,Tahoma,Arial,sans-serif;
background: #f4f4f4 url(bg.gif) top center repeat-y;
}

#wrap {
background: #ffffff;
color: #303030;
margin: 0 auto;
width: 760px;
}

#header {
    clear: both;
	width: 760px;
	height: 294px;
	background-image: url(img/sciacca.jpg);
	margin-top: 0;
	margin-bottom: 10px;
    padding: 0;
   
}

#avmenu {
clear: left;
float: left;
width: 150px;
margin: 0 0 10px 0;
font-size: 0.9em;
}

#avmenu ul {	
list-style: none;
width: 150px;
margin: 0 0 20px 0;
padding: 0;
font-size: 1.1em;
}	

#avmenu li {
margin-bottom: 4px;
}

#avmenu li a {
font-weight: bold;
height: 20px;
text-decoration: none;
color: #505050;
display: block;
padding: 6px 0 0 10px;
background: #f4f4f4;
border-left: 4px solid #cccccc;
}	
	
#avmenu li a:hover {
background: #eaeaea;
color: #286ea0;
border-left: 4px solid #286ea0;
}

.announce {
margin: 10px 0 10px 0;
padding: 10px;
width: 130px;
color: #505050;
background-color: #f4f4f4;
line-height: 1.3em;
}

.bold{
   font-weight:700;
}

#extras {
float: right;
width: 100px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
line-height: 1.5em;
}

#extras p {
margin: 0 0 1.5em 0;
}

#content {
margin: 0 110px 20px 160px;
border-left: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;
padding: 0 10px 0 10px;
line-height: 1.6em;
text-align: left;
}

#content h2 {
font-size: 1.5em;
margin: 0 0 0.5em 0;
}

img#immagine {
padding: 1px;
display:inline;
background: #cccccc;
border: 4px solid #f0f0f0;
}

h3 {
font-size: 1.3em;
margin: 0 0 10px 0;
}

a {
text-decoration: none;
color: #286ea0;
}

a:hover {
text-decoration: underline;
color: #286ea0;
}

a img {
border: 0;
}

#footer {
clear: both;
margin: 0 auto;
padding: 10px 0 20px 0;
border-top: 4px solid #f0f0f0;
width: 760px;
text-align: center;
color: #808080;
font-size: 0.9em;
}

#footer a {
color: #808080;
text-decoration: none;
}

#footer a:hover {
text-decoration: underline;
}

.left {
margin: 10px 10px 5px 0;
float: left;
}

.right {
margin: 10px 0 5px 10px;
float: right;
}

.textright {
text-align: right;
}

.center {
text-align: center;
}

.small {
font-size: 0.8em;
}

.bold {
font-weight: bold;
}

.hide {
display: none;
}

p.testo{
   text-align: justify;
   padding-left: 5px;
   padding-right: 5px;

}

h2.testo{
   text-align: justify;
   padding-left: 5px;
   padding-right: 5px;
   padding-top: 3px;

}



/* Stile per il light box */

#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(lightbox/images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(lightbox/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(lightbox/images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%	
	}

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	}
	
/* Stile della galleia natura che usa il light box */

/*
p.galleria_light{
    margin: 30px;
} */

div#gal{
margin: 0 auto;
padding: 0;
}
    

img.orizzontali{
     width: 200px;
	 height: 133px;
}
Grazie
Andrea