✔ mehrere Bilder in Div horizontal zentrieren

[tinella]

Hallo Leute

Ich bin jetzt an diesem Problem schon ein paar Tage am rumstudieren aber komme nicht zum Ziel.

Ich habe ein Div, in diesem sind 1 - 5 Bilder nebeneinander drin. Hier ist in einem Beispiel mit 2 Bildern (graue Box) zu sehen.

Ich möchte, egal wieviel Bilder sich darin befinden, immer eine horizontale Zentrierung herbeiführen.
Leider krieg ich die Bilder aber nicht mittig hin, habe schon einiges probiert, und der Stand ist folgender:

Anscheinend kapier ich irgendein CSS Prinzip nicht, mir ist unklar welches..

Html:

<div id="bilderserie">
    <a href="bild1.jpg" rel="bilderstreifen" title="Testtitel">
        <img class="serienbild" width="80px" height="80px" src="/dynimages/80/files/bilderserien/energiethemen-erneuerbareenergien/anteil-ee-endverbrauch-ch.jpg" alt="Testalt"/>
    </a>
    <a href="bild2.jpg" rel="bilderstreifen" title="Testtitel">
        <img class="serienbild" width="80px" height="80px" src="/dynimages/80/files/bilderserien/energiethemen-erneuerbareenergien/struktur-welt-energieverbra.jpg" alt="Testalt"/>
    </a>
</div>

CSS:

#bilderserie {
	background-color: #edebeb;
	width: 450px;
	min-height: 82px;
	padding: 9px 0px 9px 10px;
	margin-top: 15px;
	margin-bottom: 15px;
	text-align: center;
}

.serienbild {
	margin-top: 7px;
	margin-bottom: 7px;
	margin-left: auto;
        margin-right: auto; 
}

Um Vorschläge bin ich froh.

Tinella

 

[Maik]

Hi,

die äquivalente CSS-Eigenschaft zum HTML-Attribut align heißt text-align.

 

[Maik]

Dass es trotz des korrigierten Eigenschaftnamens noch immer nicht funktioniert, liegt einfach an dieser Regel:

#content img {
        border: none;
        float: left;
        margin: 0 10px 0 0;
}

denn links oder rechts floatende Elemente lassen sich nicht ohne weiteres horizontal zentrieren.

Also muß für die Grafikelemente innerhalb des DIVs #bilderserie, das sich selbst im DIV #content befindet, und aus diesem Grund obige Regel auch für seine eingebetteten Bilder gilt, die Regel umgeschrieben werden:

#bilderserie img {
        float:none;
}

Im übrigen dürfen Inline-Elemente, wie das strong- und span-Element, keine Block-Elemente, wie das div-Element enthalten, siehe hierzu die HTML-Elementreferenz für Inline-Elemente.

 

[tinella]

Ich war ja auch blöd dass ich nicht alle img tags abgecheckt hab.

Vielen Dank für die Antwort!