Linuchs: Bild in Tabelle zentrieren

Beitrag lesen

Hallo Michelle,

ich habe ein großes Problem. Ich habe eine Tabelle angelegt, damit ich Bilder neben Text machen kann, in die erste Zelle kommt das Bild, in die Zweite der Text. Den Text kann ich über text-align super zentrieren. Das Bild bewegt sich keinen Millimeter von der linken Seite weg, egal was ich auch mache. Align, text-align, margin, float, egal was es klebt am linken Rand. Was kann ich tun?

Habe mal schnell eine kleine Tabelle mit Bild aufgebaut und kann das Problem nicht nachvollziehen. Sowohl mit

td {  
  border: 1px solid #888;  
  text-align: center;  
}

als auch mit

<td align=center><img src="http://src.selfhtml.org/selfhtml_wiki.png"></td>

steht das Bild horizontal in der Mitte der Tabellen-Zelle. Da muss bei dir also eine übergeordnete Regel wirken.

<table class="table_img">  
<tr>  
  <td class="td_img"><img src="../Bilder/Cover/Brian/Englands-Newest-Hitmakers-copy.jpg" alt="Grafik" width="150" height="150"></td>  
  <td class="td_text">"The Rolling Stones / England's Newest Hit Makers"</td>  
</tr>

Was sagt den td_img?

.td_img {  
width:165px;  
height:155px;  
}

Okay, die Ausrichtung ist Standard, also links. Schon mal ein kräftiges Indiz, warum das Bild links steht.

Was sagt die Tabelle

.table_img {  
width:650px;  
margin:auto;  
border:0;  
line-height:30px;  
}

Auch da wird nichts zur Anordnung in den Zellen gesagt. Geht an der Stelle auch gar nicht, wollte nur schauen, ob du da eine "Hoffnung" notiert hast. Also zweites Indiz, dass die Bilder standardmäßig links stehen.

Warum sollten sie also in der Mitte stehen? Da müsstest du den Tabellen-Zellen mit dem Bild die richtige Anweisung geben. Da es ja scheinbar immer die erste Zelle in einer Zeile ist, kannst du das auch zentral machen und nicht bei jeder Zelle einzeln:

.table_img tr>td:nth-of-type(1) {  
  text-align: center;  
}

Linuchs