Galerieübersicht mittig ausrichten

Guten Morgen,

ich habe mich mal ein einer Bildergalerie versucht:
http://www.elsner.bplaced.net/kreative_ader/bildbearbeitung.html

Die Übersicht hätte ich dabei gerne horizontal in der Mitte. Leider macht es Firefox und der Internet Explorer 8 nicht. Im IE 6 wird es seltsamerweise richtig dargestellt.

CSS-Code:

[code]html,body {background:url(hintergrund.jpg); background-attachment:fixed; padding:0px 10px 0px 10px; font-family:verdana,arial,sans-serife; color:white;}

#navi {float:left; width:240px;}
#inhalt {margin-left:220px; margin-right:100px; padding:0px 20px 20px 20px; background:url(hintergrund_inhalt.png);}
#rand_rechts {float:right; width:100px;}
#fußzeile {clear: both; margin-left:220px; margin-right:100px; text-align:center;}

#div_bild {color:white;}

h1 {color:white;}
h2 {color:white; margin-bottom:0;}
h3 {color:white;}
h4 {color:white;}
h5 {color:white;}
h6 {color:white;}

p {color:white;}
#p_unten_ohne {color:white; margin-bottom:0;}

hr {color:white;}

table {color:white;}
#td_link_1 {width:15px;}
#td_link_2 {width:30px;}
#td_link_3 {width:45px;}
#td_link_4 {width:60px;}

ul {color:white; }
ol {color:white;}

a:link {color:white;}
a:visited {color:white;}

img {border:0;}
#img_50 {max-width:50%; height:auto; border:0;}
#img_80 {max-width:80%; height:auto; border:0;}
#img_text {max-width:50%; height:auto; float:left; margin-right:20px; border:0;}
#icon_groß {height:20px; border:0;}
#icon_klein {height:15px; border:0;}

/* Bildergalerie */

#grossbild {text-align:center;}
.kommentar {text-align:center;}
#td_galerie {text-align:center; vertical-align:top; padding:10px;}
#navieinzelbild {text-align:center;}
#a_img {margin-left:1em; margin-right:1em;}
#vorschau {text-align:center;} [/code]

Kann mir vielleicht jemand helfen? Ich habe schon etwas herum probiert, aber es nicht hinbekommen.
Vielen Dank schon mal.

Gruß Elsner

Die gängige Möglichkeit sowas zu machen ist es, einen div mit einer Fixierten Breite zu verwenden, und margin-left und margin-right auf auto zu setzen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" >
<head>
	<title>domain.com - About</title>
	<style type="text/css">
		#center {
			width: 300px;
			height: 200px; /*Damit ich nix in den DIV schreiben muss */
			background-color: blue;
			margin: 10px auto;
		}
	</style>
</head>
<body>
	<div id="center"></div>
</body>
</html>

Die Lösung funktioniert ab IE6 und in allen anderen Browsern :wink:

Vielen Dank für deinen Vorschlag michi7x7. Aber die Breite wollte ich dynamisch lassen.
Gibt es dann überhaupt eine Möglichkeit in meinem Fall?

Man kann nix zentrieren was die komplette Breite nutzt :ps:
Eine Möglichkeit gibts dennoch:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" >

<head>
	<title>domain.com - About</title>
	<style type="text/css">
		#center {
			background-color: blue;
			text-align: center;
		}
		#center img {
			display: inline-block;
			margin: 10px;
			background-color: red; /* Nur weil ich keine Bilder anzeige */
			width: 80px; /*Zur Vereinheitlichung */
			height: 60px; /* Weglassen! */
		}
	</style>
</head>
<body>
	<div id="center">
		<img alt="Bild" /><img alt="Bild" /><img alt="Bild" /><img alt="Bild" /><img alt="Bild" /><br />
		<img alt="Bild" /><img alt="Bild" /><img alt="Bild" /><img alt="Bild" /><img alt="Bild" /><br />
		<img alt="Bild" /><img alt="Bild" /><img alt="Bild" /><img alt="Bild" /><img alt="Bild" />
	</div>
</body>
</html>

Danke für den Hinweis, dass man nichts zentrieren kann, was die komplette Breite nutzt. So etwas muss man auch mal gesagt bekommen.
Danke für deine Bemühungen und den neuen Code. Den werde ich mal testen. Leider kann ich das erst morgen tun.

Gruß Elsner

Was die komplette Breite des Elternelementes hat, ist
automatisch zentriert als auch links- und rechts-bündig ;o)

Auch ohne Breitenangaben kann man natürlich das margin
links und rechts gleich wählen und hat das Element dann auch
zentriert mit sichtbarem Rand. Ähnliches gilt für padding, wenn
der Inhalt nur auch Blockelementen besteht, die dann bei
symmetrischem padding des Elternelementes mit sichtbarem
Rand zentriert sind.

Sehen kann man das recht gut, wenn man den Elementen
(testweise) jeweils andere Hintergrundfarben, einen Rand oder
ein ‘outline’ verpaßt.