Zur Navigation

Bild im div zentrieren [2]

11 Jörg Kruse

Jetzt nochmal ne Antwort von mir, damit ich bei weiteren Tipps benachrichtigt werde

eine Benachrichtigung wird derzeit leider nur (optional) an den Threadstarter versandt - aber ich trag dich mal manuell für diesen Thread ein :)

26.05.2005 21:51

12 Jörg Kruse

Dummerweise werden die divs, die ich um die Bilder gebaut habe, aber in der Tabellenzelle nicht horizontal zentriert, weder mit margin:auto, noch mit text-align:center.

Das Problem kann ich leider nicht reproduzieren: wenn ich das angegebene CSS in deine Beispiel-Datei überschreibe, so zentrieren Firefox und der IE die grünen divs innerhalb der Tabellenzellen. Vielleicht kannst du noch eine neue Beispieldatei hochladen, so dass ich den Anzeigefehler nachvollziehen kann?

26.05.2005 22:06

13 Micha 

Eine Benachrichtigung wird derzeit leider nur (optional) an den Threadstarter versandt - aber ich trag dich mal manuell für diesen Thread ein :)
Na, das ist doch noch mal eine Verbesserungsidee für das Forum... und danke für's Eintragen!

Vielleicht kannst du noch eine neue Beispieldatei hochladen, so dass ich den Anzeigefehler nachvollziehen kann?
Beispiel ist jetzt hier:
http://www.bmserver.de/user/kuehn/temp/zentrierentest/test.htm
Ich habe die Tabellenabstände padding und margin alle auf 0 gesetzt, damit man den Effekt besonders deutlich sieht. Er tritt dann auf, wenn die Tabellenzelle durch zuviel Text breiter wird als das Bild + Rand.

Danke schon mal für weitere Hilfe, der Service hier ist echt super! Schade, dass so wenige andere mitreden!

Micha

27.05.2005 09:49

14 Jörg Kruse

Ok, jetzt seh ich's. Die simulierte table-cell benötigt wohl - wie eine echte Tabelle - noch eine umgebende table und table-row. Das simulierte table kann man dann mit margin:auto zentrieren. Der Anschaulichkeit halber habe ich im folgenden Beispiel die Klasse "bild" durch die Klasse "td" ersetzt:

<td><div class="table"><div class="tr"><div class="td"><a href="#"><img src="102-0260_img.jpg" width="120" height="90" border="0" alt="102-0260_img.jpg" title="102-0260_img.jpg  600x450  28 KB"></a></div></div></div><br><div class="gr">102-0260_img<br><span class="kl">Querformat mit etwas längerer Beschreibung, um den Nicht-Zentrierungseffekt zu demonstrieren.</span></div></td>

im CSS-Teil:

#vorschau .table {
display:table;
margin:auto;
}

#vorschau .tr {
display:table-row;
}

#vorschau .td {
display:table-cell;
width:120px;
height:120px;
background-color:green;
vertical-align:middle;
text-align:center;
}

27.05.2005 10:46 | geändert: 27.05.2005 10:48

15 Micha

Na, das artet aber ziemlich in div-Suppe aus, oder? Geht es denn gar nicht mit einem einzelnen div um das <img>? So mag ich das wieder niemandem vorsetzen.
Langsam verzweifle ich :-(

Micha

27.05.2005 11:03

16 Jörg Kruse

Eine perfekte Lösung gibt es wohl nicht, ich habe jedensfall auch über Google bislang nichts besseres gefunden - einen zumindest kleinen Haken wird es wohl immer geben. Hast du den Lösungsvorschlag mit dem Blind Gif schon ausprobiert? ist zwar auch nicht elegant, aber zielführend, sogar für den IE

27.05.2005 11:28 | geändert: 27.05.2005 11:30

17 Micha

Hast du den Lösungsvorschlag mit dem Blind Gif schon ausprobiert?
Nein, denn ich bastle an einem Programm, das die Bildergalerien erstellt. Und da möchte ich den Usern durch Manipulation lediglich der css-Datei möglichst viele Freiheiten lassen. Deshalb sträube ich mich etwas, die HTML-Datei derart zu verändern. Ansonsten wäre es sicher auch nicht schlechter als Tabelle in Tabelle oder die Div-Suppe...

Micha

27.05.2005 20:19

18 Jörg Kruse

Noch eine Möglichkeit, die ich gefunden habe, die allerdings auch eine Änderung des HTML-Quelltextes voraussetzt und nicht im IE funktioniert

Mithilfe zweier geschützter Leerzeichen wird eine Zeilenhöhe definiert, die der Höhe der Box entspricht. In Bezug auf die Zeilenhöhe kann vertikal zentriert werden. Die Breite der Box muss wegen der Leerzeichen noch um ein paar Pixel erhöht werden

<td><div class="bild">&nbsp;<a href="#"><img src="102-0260_img.jpg" width="120" height="90" border="0" alt="102-0260_img.jpg" title="102-0260_img.jpg  600x450  28 KB"></a>&nbsp;</div><br><div class="gr">102-0260_img<br><span class="kl">Querformat mit etwas längerer Beschreibung, um den Nicht-Zentrierungseffekt zu demonstrieren,<br> der auftritt, wenn man die Klassen table und tr weglässt.</span></div></td>

#vorschau .bild {
    width:130px;
    height:120px;
    background-color:green;
    line-height:120px;
    text-align:center;
}

#vorschau .bild img {
    vertical-align:middle;
}

27.05.2005 23:21

20 Jörg Kruse

Mit margin:auto sollten sie zentriert werden:

#vorschau .bild{
margin:auto;
width:122px;
height:122px;
background-color:green;
text-align:center;
line-height:122px;
}

29.05.2005 19:49 | geändert: 29.05.2005 19:50