CSS: "float" und trotzdem zentrieren ?

M

marcusstiehler

Mitglied
Thread Starter
Dabei seit
03.04.2008
Beiträge
40
Reaktionspunkte
2
Hallo liebes Forum!

Habe hier ein kleines Problem: Ich möchte eine Bildergalerie auf meiner Website machen. Der HTML-Code von der Galerie schaut folgendermaßen aus:
HTML:
<div id="gallery">
<p><a href="pictures/1.jpg"><img src="pictures/t1.jpg" alt="Aussicht"></a></p>

<p><a href="pictures/2.jpg"><img src="pictures/t2.jpg" alt="Aussicht"></a></p>

<p><a href="pictures/3.jpg"><img src="pictures/t3.jpg" alt="Aussicht"></a></p>

<p><a href="pictures/4.jpg"><img src="pictures/t4.jpg" alt="Aussicht"></a></p>

<p><a href="pictures/5.jpg"><img src="pictures/t5.jpg" alt="Aussicht"></a></p>

<p><a href="pictures/6.jpg"><img src="pictures/t6.jpg" alt="Aussicht"></a></p>

<p><a href="pictures/7.jpg"><img src="pictures/t7.jpg" alt="Aussicht"></a></p>

<p><a href="pictures/8.jpg"><img src="pictures/t8.jpg" alt="Aussicht"></a></p>

<p><a href="pictures/9.jpg"><img src="pictures/t9.jpg" alt="Aussicht"></a></p>

</div>

Das ist natürlich nur von dem Galerie-Part, darum herum ist noch ein Wrapper, oben noch eine Navigationsleiste etc.

Das CSS dafür ist folgendes:
Code:
#gallery {
	margin: 20px auto;
	width: 100%;
	border: 0px;
	font-size: 0.91em;
	padding: 5px;
	clear: both;
}

#gallery p {
	text-align: center;
	float: left;
	margin: 10px;
	padding: 3px;
	border: 1px dashed white;
}

Ich möchte, dass die Thumbnails (alle 100px breit) nicht untereinander, sondern nebeneinader stehen. Das funktioniert mit float:left auch okay. Es werden auch zwei "Zeilen" angezeigt.
Allerdings möchte ich diesen ganzen Block horizontal zentrieren. Und hier stehe ich vor einem Rätsel: Wie geht das?

Unten seht ihr noch einen Screenshot von der Website.


Ich bedanke mich schonmal für Eure Ratschläge!

Marcus
 

Anhänge

  • screenshot.png
    screenshot.png
    49,4 KB · Aufrufe: 74
Um Elemente nebeneinander anzuordnen, braucht es kein float. Dazu reicht es display auf inline zu setzen. Und dann ist auch wieder eine Zentrierung möglich.

Abgesehen davon ist es semantisch nicht sonderlich elegant, eine Gruppe von Bildern in einzelnen Paragraphen unterzubringen. Warum keine ungeordnete Liste oder sogar gar nichts drumrum?
 
Zurück
Oben Unten