• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Grafik und Text in Tabellenzelle vertikal zentrieren?

C

Cyberduck

Neues Mitglied
Hallo,

wie kann ich eine Grafik links und rechts daneben Text, vertikal mittig von einer Tabellenzelle ausrichten?

So habe ich es versucht, aber der Text ist nicht mittig sondern oben an der Grafik:
HTML: 
<td valign="middle">
   <img src="placeholder.png" alt="Grafik" align="left" height="200" width="50">
   <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
</td>
Eine weitere Variante war:
HTML: 
<td valign="middle">
   <img src="placeholder.png" alt="Grafik" align="middle" height="200" width="50">
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</td>
Allerdings wird der umgebrochene Text unter der Grafik dargestellt, wenn die Zelle nicht breit genug ist, obwohl noch genügend Platz von der Grafik vorhanden ist. Wird der Text wie zuvor in ein <p> gesetzt erscheint er sofort unter der Grafik.

Wie kann ich die Elemente entsprechend zentrieren? Gerne auch mit CSS, allerdings kann ich nur dieses HTML Subset und die CSS Properties verwenden. Es hatte auch schon irgendwie funktioniert, nur habe ich leider diese Variante überschrieben!
 
Wozu hast Du die Tabellenzelle? Sind es wirklich tabellarische Daten?

Unabhängig davon wäre die Lösung im CSS zu suchen, es sei denn Du erstellst gerade einen HTML-Newsletter. Mit CSS wäre es z.B. so möglich:
Code: 
td { vertical-align: middle; }
td img { display: inline; }
 
Hi,

es sind nicht wirklich Tabellarische Daten. Es wird für eine Druckfunktion in einer Software genutzt. Deshalb auch nur das eingeschränke HTML Subset und die CSS Properties Aus diesem Grund würde Dein Vorschlag ohnehin nicht bei mir Funktionieren.

Selbst wenn, wird bei mir der Text nicht mittig dargestellt sondern unten neben der Grafik (Browser Firefox 3.6.x). Das Dokument zu testen sieht so aus:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Test</title>
  <style type="text/css">
     td { vertical-align: middle; }
     td img { display: inline; }
  </style>
</head>
<body>
<table border="1" cellpadding="2" cellspacing="2" width="100%">
  <tbody>
    <tr>
      <td>
         <img src="placeholder.png" alt="Grafik" height="200" width="50">
         Lorem ipsum dolor sit amet, consetetur sadipscing elitr
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
</body>
</html>
Gibt es noch eine Möglichkeit?

Soweit ich mich richtig erinnern kann, hatte ich in dem funktionierenden Code eine Mischung aus HTML und CSS zur Ausrichtung der Elemente.
 
Dank deinen Code hab ichs gerade selbst testen können. Setz mal für das Bild "vertical-align: middle;".
 
Ja, so wird der Text zentriert, aber sobald Grafik + Text in der Breite nicht in eine Zelle passen und der Text umgebrochen werden muss, fielst der Text nicht neben der Grafik weiter, sondern wird nach dem Umbruch unter der Grafik fortgesetzt. Vom verhalten ist es eigentlich genau so wie bei meiner zweiten Variante, nur dass die Formatierung jetzt mit CSS erfolgt.

Wie erreiche ich es, dass der umgebrochene Text ebenfalls zentriert neben der Grafik dargestellt wird?

Hier noch der Code dazu, um es ggf. schnell selbst zu testen zu können ;-)
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Test</title>
  <style type="text/css">
     td { vertical-align: middle; }
     td img { vertical-align: middle; }
  </style>
</head>
<body>
<table border="1" cellpadding="2" cellspacing="2" width="100%">
  <tbody>
    <tr>
      <td width="20%">
         <img src="placeholder.png" alt="Grafik" height="200" width="50">
         Lorem ipsum dolor sit amet, consetetur sadipscing elitr
      </td>
      <td width="80%">&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
</body>
</html>
 
Wieso nimmst Du nicht noch eine extra Tabellenzelle für Bild und für Text. Dann würdest Du das alles umgehen.

(ich geh mich mal geißeln für diesen Tipp)
 
Ja das könnte ich machen und hätte ich vermutlich auch, wenn es wirklich ein HTML-Dokument wäre. Im Quellcode (C++) der Anwendung sieht das ganze aber relativ unübersichtlich aus, da z.B. für bestimmte Zeichen Escape-Sequenzen verwendet werden müssen und das wollte ich weitgehendst vermeiden um den Code leserlich zu gestalten.

Was mich jetzt noch davon abhält, das es wohl irgendwie mal funktioniert hat und ich zusätzlich nicht verstehe warum Grafik und Text nicht wirklich Zentriert werden, obwohl es doch eigentlich funktionieren müsste, oder?
 
Dieses Pseudo-HTML in Programmiersprachen funktioniert meiner Erfahrung nach leider nicht annähernd wie echtes HTML. Ich habe es gerade mal ausprobiert und bekomme nicht einmal automatische Zeilenumbrüche hin.

Code: 
#include <QtGui>

// reading a text file
#include <iostream>
#include <fstream>
#include <string>

/**
 *
 */
int file_get_contents(std::string filePath, std::string &buffer)
{
    int ret = 0;

    std::ifstream myfile(filePath.c_str());
    std::string line = "";

    int i = 0;

    if (myfile.is_open()) {
        while (myfile.good()) {
            if (i > 0) {
                buffer += "\n";
            }
            ++i;
            std::getline(myfile, line);
            buffer += line;
        }
        myfile.close();
    } else {
        std::cout << "Unable to open file";
        ret = 1;
    }

    return ret;
}

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    std::string buffer = "";
    file_get_contents("./demo.html", buffer);

    QLabel label(QString::fromStdString(buffer));
    label.show();
    return app.exec();
}
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben