如何将图像置于由 HtmlAgilityPack 创建的 HTML 中

Question

我有一个非常简单的 HTML 使用 HtmlAgilityPack 创建的文档，其中嵌入了图像；（base64 格式）

Public Report As New HtmlDocument()

Dim html As String = "<!DOCTYPE html>
<html>
<body>
<img src=""data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANUAAADICAIAAADwajORAAAAAXNSR0IArs4c6QAAAARn"" alt=""Red dot"" align=""middle""/>
</body>
</html> "

    Report.LoadHtml(html)
    WebBrowser1.DocumentText = Report.Text

图片显示在左边，我想水平居中，请问怎么办？

（由于明显的原因，实际的 base64 图像被缩短了）

Answer 1

给出

的图片风格

img{

        display:block;

        margin:auto;
}

或者您可以将图像放在 div 标签内并赋予 div 这种样式：

div{

       width:; ==> give it any width you want

       height:; ==> give it any height want

       margin:auto;
}

Answer 2

我要找的答案是：

使用 HtmlAgilityPack，您可以像这样在 HTLM 中嵌入 CCS：

       Dim html As String = "<!DOCTYPE html>
<html>
<body>
<head><style>html, body {
height: 100%;
margin:0;
padding:0;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;

}
</style></head>
<div>
    <img src=""data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANUAAADICAIAAADwajORA"" alt=""Red dot"" class=""center""/>
</div>
</body>
</html> "

感谢 Mortb 为我指明了正确的方向。

Answer 3

在 HTML 中，图像的行为类似于文本，因此要使图像水平居中，您真正需要做的就是在其周围添加一个 div，使所有文本居中：

<div style="text-align: center">
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANUAAADICAIAAADwajORAAAAAXNSR0IArs4c6QAAAARn" alt="Red dot"/>
</div>

不需要特殊的 CSS 解决方法。

如何将图像置于由 HtmlAgilityPack 创建的 HTML 中

How can I center a image in a HTML created by HtmlAgilityPack

html

c#

vb.net

html-agility-pack