Bilder in div's exakt positionieren

[fontsix]

Guten Morgen zusammen.

Ich stehe vor einem Problem mit dem ich mich schon seit ein paar Stunden herumärgere. Ich würde gerne 2 Bilder in einem div positionieren. Als Beispiel habe ich mal eine Grafik angefügt. So würde ich es lösen wollen. Vielleicht gibt es ja auch einfachere Möglichkeiten, vielleicht kommt man auch mit weniger div's aus ?


Die Bilder sollten zentriert im äußeren div ausgerichtet sein und ihre Größe dem äußeren div anpassen. Zudem würde ich die Bilder in den inneren div's gerne per vertical-align mittig ausrichten. Außerdem sollten die beiden Bilder einen gewissen Abstand, wenn möglich relativ zueinander, haben.

Ich hoffe ich konnte mein Problem einigermaßen präzise beschreiben und würde mich über eine Antwort freuen.

 

[MrMurphy]

Hallo,

das Bild sagt über den aktuellen Stand deines Quelltextes leider nichts aus. Gib' mal einen Link zu der Seite. Falls du noch keinen Webspace hast - den gibt es zu Hauf kostenlos. Zum Beispiel bei bplaced.net.

Und geht es nur um Bilder oder gehört zu den Bildern im Endeffekt auch Text? Wenn es nur um die Bilder geht brauchen die zum Beispiel keine sie umschließende DIVs.

Gruss

MrMurphy

 

[fontsix]

Die komplette Seite möchte ich momentan ungern veröffentlichen. Text ist nicht erforderlich.

#partner { 
padding-left: 50%;                               
background-color: white;            
border-left: 1px solid black;           
border-right: 1px solid black;           
border-bottom: 1px solid black;   
vertical-align: middle;
}

Das soll der äußere div sein. Dies passt sich auch der Bildschirmauflösung an.

Die Bilder würde ich nun gerne in diesen div einschliessen, zentriert nebeneinander, mit einem gewissen Abstand zueinander, wie ich schon in meinem Screenshot verdeutlicht habe.
Wenn ich die Bilder nun per

<img src="quelle" alt="Bild1"></img>
<img src="quelle" alt="Bild2"></img>

einfüge, werden sie immer untereinander angezeigt. Das liegt wohl an dem padding-left, vermute ich. Wenn ich das rausnehme könnte ich die Bilder sicher per center mittig ausrichten, allerdings ist mir das vertical-align: middle wichtig. Da der Text im Bild sonst nicht nebeneinander angezeigt wird. Ausserdem ändert sich bei Verkleinern der Seite dann auch nicht die Größe der Bilder.

 

[threadi]

Das hier

<img src="quelle" alt="Bild1"></img>
<img src="quelle" alt="Bild2"></img>

ist falsch. img-Elemente wurden nur noch die beendet. Korrekt wäre:

<img src="quelle" alt="Bild1">
<img src="quelle" alt="Bild2">

wenn Du HTML4 oder HTML5 als Standard verwendest.

Wenn Du 2 Grafiken nebeneinander zentrieren willst, mach sie explizit zu Inline-Elementen und gibt den umgebendem Blockelement die Eigenschaft "text-align: center;" mit. Also:

.centerimg { text-align: center; }
.centerimg img { display: inline; }