QTextBrowser显示图片（图片文字对齐）

最新推荐文章于 2025-04-29 16:52:59 发布

风烟倦

最新推荐文章于 2025-04-29 16:52:59 发布

阅读量4.3k

点赞数 1

分类专栏： Qt 文章标签： Qt显示图片加文字 QTextBrowser

本文链接：https://blog.youkuaiyun.com/qq_37996632/article/details/121690850

版权

Qt 专栏收录该内容

51 篇文章

订阅专栏

本文介绍了如何在QTextBrowser组件中插入并正确对齐图像和文本，通过使用HTML标签和表格布局来实现图文混排。在尝试了直接插入img标签和使用样式调整后，发现无法达到理想效果，最终通过使用table布局解决了问题，实现了图标和文字的垂直居中对齐。这种方法可以用于创建信息输出框，展示带有图标的时间和文字信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时候，除了文字，还需要在QTextBrowser显示一些图片，图标之类的。语法实际上也很简单，用QTextBrowser的insertHtml(QString)就行。

理论上下面这样的代码就可以了

QString html = "<div style=\"height=20\"> \n"
	 "<img src=:/images/message/warning.svg style=\"vertical-align:middle\"> \n"
	 "<span>TestTestTestTest</span> \n"
"</div>";
ui->txb->insertHtml(html);

或者这样的代码

QString html = "<div style = \"height=10\"> "
	"<img height = 20 width = 20 src = :/images/message/warning.svg> <span>TestTestTest</span> "
"</div>";
ui->txb->insertHtml(html);

但是经过实际测试，这些代码都不行，或者其他的html代码，各种都试过了，呈现的无非是下面两种效果，要么不对齐，要么图标变大了还是不对齐。

最后用table解决

QString html = "<table>"
	"<tr>"
		"<td><img height=\"24\" src=:/images/message/warning.svg></td>"
		"<td style=\"vertical-align: middle;\">Here is some text.</td>"
	"</tr>"
"</table>";

加上时间和文字，就能当信息输出框用了

void MessageOutputBox::appendWarningMsg(const QString &str)
{
    QString time = QDateTime::currentDateTime().toString("yyyy-MM-dd hh:mm:ss");
    QString html = "<table>"
            "<tr>"
                "<td><img height=\"20\" src=:/images/message/warning.svg></td>"
                "<td style=\"vertical-align: middle; font-size:14px\"> &nbsp; %1 &nbsp; </td>"
                "<td style=\"vertical-align: middle; font-size:14px; color:#F9D65D\"> %2 </td>"
            "</tr>"
        "</table>";

    ui->txb_warning->insertHtml(html.arg(time, str));
    ui->txb_message->insertHtml(html.arg(time, str));
}