Search code examples
c#htmlvb.nethtml-agility-pack

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


I have a very simple HTML document created with the HtmlAgilityPack, with a embedded image; (base64 format)

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

The image displays on the left, I'd like to horizontally center it, how can this be done?

(The actual base64 image is shortened for obvious reasons)


Solution

  • The answer I was looking for was:

    With the HtmlAgilityPack you can embed the CCS insite the HTLM like so:

           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> "
    

    Thanks to Mortb for pointing me in the right direction.