Bilder unter Text einfügen

[AudrinaColonia]

Hallo,

wir arbeiten mit Klicktipp, einem Newsletteranbieter der einen HTML Editor von gefühlt Anno 1910 anbietet. Ich habe nun folgendes Problem:

Ich habe einen Text und möchte darunter 2 Bilddateien einfügen. Das sollte dann so aussehen:

                                 Text 1                Text2
                                 [BILD]                [BILD]

Leider kann ich das Bild dort nur links, rechts oder halt mittig zentrieren. Ich möchte aber ja das es unter den jeweiligen Texten erscheint. Mit Leerzeichen setzen lässt sich das Bild leider auch nicht verschieben 🐶

Vielleicht habt Ihr ja auch ne Idee.

Danke schonmal !

Rebekka

[djr]

Bei HTML-E-Mails (= "Newsletter") ist eine Tabelle als Layout-Technik (leider) OK. https://wiki.selfhtml.org/wiki/HTML/Tabellen/Aufbau_einer_Tabelle

[AudrinaColonia]

Danke! Hab das jetzt in Tabellen gepackt, aber das Bild ist immer noch linksbündig. Ich bekomme das nicht eingerückt. Das hier ist der Code:

<table>
				<tbody>
					<tr>
						<th>
						<center style="text-align: left;"><img alt="" height="189" src="https://klicktipp.s3.amazonaws.com/userimages/95513/images/861501-Hamann-Streusalz-25kg-355-14599-14600.jpg" width="123" /></center>
						</th>
					</tr>
				</tbody>
			</table>

Das blöde ist, dass der Editor ganz viele Befehle von Html einfach auch nicht akzeptiert, er zeigt mir dann immer Fehler an. Und ich will ja nicht, dass das Bild rechts -links oder zentriert ist sondern das es sich genau unter dem Text befindet. Wie gebe ich das denn dann ein?

Danke :D

[JürgenB]

Hallo,

  				<center style="text-align: left;"><img alt="" height="189" …

also was denn jetzt? center oder left?

Gruß
Jürgen

[Rolf B]

Hallo AudrinaColonia,

du hast zwei Texte. Nebeneinander. Wie machst Du das denn? Deine Bildanordnung sollte sich an dieser Methode orientieren.

Vermutlich werden die Texte ebenfalls per table-Element nebeneinander gesetzt. Um eine genaue Ausrichtung zu bekommen, sollten die Bilder in der gleichen Table sein, entweder zusammen mit dem Text in einer Tabellenzelle oder in einer eigenen table row, das ist egal.

Zu deinem Beispielcode: Wenn Du eine Tabelle mit nur einer Cell (<th>/<td>) und einer Row (<tr>) hast, dann landet diese Zelle linksbündig. Ganz normal. Dein (obsoletes) <center> Element zentriert das Bild dann innerhalb dieser Zelle. Da sich die Größe von Tabellenzellen aber nach dem Inhalt richtet (sofern du nichts anderes angibst), zentrierst Du ein Bild der Breite X in einer Zelle der Breite X - was natürlich komplett wirkungslos ist. Und dazu kommt der Hinweis von Jürgen, dass die Kombination von <center> und style="text-align:left" sinnfrei ist. <center> ist ein <div> mit implizitem style="text-align:center"^[1], d.h. dein <center style="text-align:left"> ist Hü und Hott in einem Atemzug.

Wenn Du den Inhalt einer Tabellenzelle zentrieren willst, dann setze style="text-align:center" auf das td/th Element oder - falls das in Mail nicht funktioniert - verwende das legacy-Attribut align="center". Aber wie gesagt: das klappt nur wenn die Tabelle breiter ist als ihr Inhalt, sonst ist kein Platz zum Zentrieren da.

Aber das ist Exkurs, du willst das ja eigentlich gar nicht, du willst Dinge unter deinen Texten anordnen. Und ich denke, dafür müssten wir wissen, wie du die Texte positionierst.

Rolf

---

1. Sorry für diese „Lüge für Kinder“ - in Wahrheit ist es -moz-center, -webkit-center oder -ms-center und angeblich weicht die Funktionialität dieser Präfix-Versionen leicht vom Standard-center ab; die entsprechenden Suchtreffer im Web sind aber alt und im heutigen Chrome sehe ich keinen Unterschied ↩︎